Maintain rotation for smaller image

[rvernon9]

I have image smaller than preview window. If I save normally using "export" feature, then the image is padded with a white background to be the size of the preview window. I added the following instead of using the "export" feature.

Trickier issue is if image is really wide or really tall -- like if preview was 700 x 700, and image was 300 x 1000. Cropit will save it as 700x700, padded with whitespace. Why would we want the image padded with whitespace? I want it resized to be something like 210 x 700, or maybe cropped at 300 x 700. Is that something that has been worked on?

                if ((offset.x > 0) && (offset.y > 0)) {
                    //this indicates that the image is smaller than the preview area
                    //this loses the image rotation
                    console.log("-- disabling cropit. using original image src --");
                    console.log("imgsize size=" + imgsize.width + " x " + imgsize.height);
                    imageData = $('.image-editor').cropit('imageSrc');
                    var imgsmall = new Image();
                    imgsmall.src = imageData;

// each time the user does a rotate I increment a counter (+1 for CW, -1 for CCW)
                    var _cropRotateTmp = _cropRotateCount;
                    imgsmall.rotation = 0;
                    while (_cropRotateTmp > 0) {
                        imgsmall.rotation = (imgsmall.rotation + 90) % 360;
                        _cropRotateTmp -= 1;
                    }
                    while (_cropRotateTmp < 0) {
                        imgsmall.rotation = (imgsmall.rotation + 270) % 360;
                        _cropRotateTmp += 1;
                    }
                    var imgRotation = imgsmall.rotation;
                    imageData = imgsmall.src;
                    if ((1==1) && (_cropRotateCount != 0)) {
                        //create canvas and rotate + translate to rotate the image
                        var canvasSmall = document.createElement('canvas');
                        $(canvasSmall).attr('width',imgsize.width);
                        $(canvasSmall).attr('height', imgsize.height);
                        var canvasContext = canvasSmall.getContext('2d');
                        canvasContext.fillStyle = '#fff';
                        canvasContext.fillRect(0, 0, canvasSmall.width, canvasSmall.height);
                        canvasContext.rotate(imgsmall.rotation * Math.PI / 180);

                        if (imgRotation == 0) {
                            canvasContext.translate(0,0);
                            canvasContext.drawImage(imgsmall, 0, 0);
                        } else if (imgRotation == 90) {
                            canvasContext.translate(0, imgsize.width * -1);
                            canvasContext.drawImage(imgsmall, 0, 0);
                        } else if (imgRotation == 180) {
                            canvasContext.translate((imgsize.width * -1), (imgsize.height * -1));
                            canvasContext.drawImage(imgsmall, 0,0);
                        } else if (imgRotation == 270) {
                            canvasContext.translate((imgsize.height * -1),0);
                            canvasContext.drawImage(imgsmall, 0, 0);
                        } 
                        imageData = canvasSmall.toDataURL('image/jpeg', 1.0);
                    }
//this is hidden HTML field used to submit image to server-side to save to server
                    $('.hidden-image-data').val(imageData);
                }