Cropper adds a line to image if it's too big

[nachoargentina]

Hi!
I'm facing an issue with big images. And I mean big in pixels, not necessarily big on size.
I have for example this sunset image which is 5472 x 3648px and weights about 581kb.
When I upload it to the cropper, it looks good:

I make a little zoom, move it around a bit and click on the "get cropped canvas" button on the demo page for the cropper, and I end up with the cropped image with a weird line. Some times is vertical, some times it's horizontal:

Do you guys know anything about this and how to avoid it?

[tiloru]

I'm having the same problem! Thanks for reporting the issue 👍

[fengyuanchen]

What's the browser and system?

[nachoargentina]

I apologize for the delay fengyuanchen! I've been out of town.
The browser is Chrome Versión 46.0.2490.71 m and the system is Windows 8.1

[nachoargentina]

If you want I can send you the specific image I'm having issues with also! but any big image in terms of resolution is having the same problem on my end. I've even tried it on a Mac and Safari (don't know version here as it was a firend's computer) and was getting the same issue.

[fengyuanchen]

Send me the specific image please as I found that everything is fine on Chrome 46 and Windows 10 in my computer.

[nachoargentina]

Here's the image. Please note that the problem shows after you crop the image (after running getCroppedCanvas)

[fengyuanchen]

It seems to be an issue of the CanvasRenderingContext2D.drawImage API, and it only occurs when the dimensions of the image large than some threshold values (e.g. 5400 × 3600 px).

[nachoargentina]

Ok...so then this is not a an issue with the cropper, is just that the API is like that. Can you think of any workaround that doesn't involve re-sizing the image to a lower res? or we are stuck with this API issue?
I'll look around to see if there's anything that can be done about it.

[fengyuanchen]

Passed browsers:

• Firefox 41
• Internet Explorer 11
• Windows Edge

Failed browsers:

• Chrome 46
• Opera 32
• Safari (lastest?)

So, this may be a bug of the Webkit or Chromium?

[hppycoder]

You could run this through a pre-renderer first to crop the image back. We use BlueImp's Javascript Load Image and set the max-width to: 1500

var file = evt.target.files[0];
loadImage(
                    file,
                    function (canvas) {
                      // inner method to get the image from the canvas
                    },
                    {
                      maxWidth: 1500,
                      canvas: true
                    }
                  );

[stephanpaquet]

We've got the same issue here on Windows / Chome.

I tried a lot of time with Ubuntu / Chrome and never succeed to reproduce it, with the same picture. The picture is (10 109 x 4 542 px)

[ctomoshekamer]

Hi @hppycoder ,
Where did you put this code?
Thanks,

[nachoargentina]

Hi @hppycoder! I'm already using that for mobile cropping, as the memory there is an issue with big images.
I wanted to use full resolution images for desktop though, but having this issue, I see no way out of it for now, so that might be the only solution...
I believe the problem comes with the native drawImage method, which does a subsample of the image and in that process it adds the lines

[ctomoshekamer]

Hi,
In file: cropper.js, in line:2444, (function : "getCroppedCanvas").
replace: args.push(dstX, dstY, dstWidth, dstHeight);
to: args.push(Math.floor(srcX), Math.floor(srcY), Math.floor(srcWidth), Math.floor(srcHeight));

It's need to resolve the problem.

[fengyuanchen]

@ctomoshekamer I just try your solution, It really resolves the problem. You are so awesome!!! 👍

[nachoargentina]

Sorry for the late comment, but I couldn't leave the opportunity to say thank you!! This is great!!