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);
}
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?