Canvas support about croppr.js HOT 5 CLOSED

Hi @mbwhite, do you mean drawing the Croppr UI on top of a canvas? Or do you mean using Croppr to crop an existing canvas context? If it's the latter, you can refer to this comment I've made in another thread.

from croppr.js.

@jamesssooi ... I've an existing canvas element and the wish is to display the Croppr UI on top that.
So the user can specify how they believe the canvas should be cropped. It will contain an image - but also other elements drawn hence using a canvas.

from croppr.js.

If you inspect Croppr's DOM, you'd see that Croppr's elements (handles, boxes, etc) are simply laid on top of an element.

So in theory, with some modifications to Croppr you can make it overlay these elements on top of your <canvas> element instead. Have a look inside the createDOM() method where it creates the <img> element.

An alternative method is to simply create an <img> element with it's src from your canvas using the fromDataURL() method. Then let Croppr work on that img element natively.

from croppr.js.

@jamesssooi Thanks for the update - sorry I didn't respond earlier.
I've found the section of code you mention; will see what I can do.

Will close this issue.

from croppr.js.

This comment appears to have a solid example of drawing the Croppr selection onto a canvas element.

from croppr.js.