search

scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 307 forks source link

How to export the image? #267

Open DannyMaitland opened 6 years ago

DannyMaitland commented 6 years ago

Hello! I'm new to plugins so I am a little lost.

I'm looking through the demo files and when I click export it just opens a blank tab with nothing on it. I'm sorry if this is a pretty stupid question, I just don't really know how to move forward with the plugin.

I've looked through the docs and followed other peoples methods but it doesn't seem to do anything. Thanks for helping.

yuriy-boyko commented 6 years ago

I have the same issue, the problem occurs on Chrome, on Firefox it works good

ghost commented 6 years ago

If you press ctrl+shift+j on Chrome it'll tell you in the console why it failed.

I had the same issue and fixed it by using the download plugin from http://danml.com/download.html

I initiated the binary download around line 700 of jquery.cropit.js with the following code.

canvasContext.translate(this.rotatedOffset.x * exportZoom, this.rotatedOffset.y * exportZoom);
canvasContext.rotate(this.rotation * Math.PI / 180);
canvasContext.drawImage(this.image, 0, 0, zoomedSize.width, zoomedSize.height);
newpic = canvas.toDataURL(exportOptions.type, exportOptions.quality);
download(newpic, filenamepic, "image/png");

I believe only the last 2 lines have been altered by myself.

The newpic variable was declared earlier.

Bit of a hacky solution I guess but it works. I'm quite the novice and I had already gone pretty far in implementing the plugin so I desperately needed a solution. Hopefully this will help somebody :-)