X, Y position of Crop on some devices is wrong

[Tomasz Smykowski]

I've created a demo. Canvas takes care of cropping properly, and CamanJS not.
I noticed on my PC it works fine, but on my laptop not. So it can depend on screen resolutions. Also the issue is visible only in Firefox

http://polishwords.com.pl//dev/croperrortest.php

[Juliver Galleto]

did you find a solution for this? can you share please? @tomaszs

[Tomasz Smykowski]

Hello mejuliver. It was internal project where i used it. Eventually i just used computer on what it worked fine. So really didn't find a software solution. There seems to be a serious bug in CamanJS. I think also it is very hard to reproduce. No one here took this report. Maybe with more details they will be able.

[Juliver Galleto]

@tomaszs hello, I sorted it out, it happens because Caman took the original dimension of the image as reference when cropping so the only solution is to resize the image so when cropping, it will get the correct area of the image. What I did, is just, I made the original image fit unto the responsive canvas, and it works great.

[Tomasz Smykowski]

Cool. Can you provide any snippet for this? Maybe more people struggle

[Juliver Galleto]

You can just bind the canvas on load function to the function below drawImageScaled

img.onload = drawImageScaled.bind(null, img, ctx);

function drawImageScaled(img, ctx) {
   ctx.canvas.width = img.offsetWidth;
   ctx.canvas.height = img.offsetHeight;

   var canvas = ctx.canvas ;
   var hRatio = canvas.width  / img.width;
   var vRatio =  canvas.height / img.height;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - img.height*ratio ) / 2;  

   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(img, 0,0, img.width, img.height,centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);

}

the function above will make the image fit inside with the given height and width. That's what I used on my image editor project https://github.com/mejuliver/image-editor