In my app users can take a picture or upload an image from their device. This image is the source for a Jcrop function. This function works correctly, as in it 'crops' correctly. However the jcrop-tracker that previews what you are cropping doesn't show it's correct position on the image.
Please see this example:
When moving the tracker to the top of the image, it'll show almost the entire image. When moving further down, it'll show nothing at all. How is this possible?
My guess is this is because of jCrop having issues with downscaled pictures (for example pictures taken from device camera).
I use CSS to downscale the image so it can fit on on device screen:
#imgContainer {
max-width: 100%;
max-height: 100%;
}
#imgContainer img {
max-width: 100%;
max-height: 100%;
}
Is there any way to prevent this?
Here's my code:
$(window).load(function() {
var jcrop_api, boundx, boundy;
function updatePreview(c) { // croping image preview
if (parseInt(c.w) > 0) {
var rx = 220 / c.w, ry = 220 / c.h;
}
}
function showCoords(c) { // show all coords
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
}
$('#cropImage').Jcrop({
onChange: updatePreview,
onSelect: showCoords,
bgFade: true,
bgOpacity: .8,
aspectRatio: 1,
maxSize: [ 150, 150 ],
boxWidth: 284,
boxHeight: 382
},function(){
jcrop_api = this;
});
var canvas = document.getElementById("canvasresult");
$("#m1-cropScreen-cropIt").on("click", function(){
var context = canvas.getContext("2d");
var img = document.getElementById("cropImage"),
$img = $(img),
imgW = img.naturalWidth,
imgH = img.naturalHeight;
console.log($img.width());
console.log($img.height());
var ratioY = imgH / $img.height(),
ratioX = imgW / $img.width();
var getX = $('#x').val() * ratioX,
getY = $('#y').val() * ratioY,
getWidth = $('#w').val() * ratioX,
getHeight = $('#h').val() * ratioY;
context.drawImage(img,getX,getY,getWidth,getHeight,0,0,150,150);
$('#cropResult').attr('src', canvas.toDataURL());
});
});