Canvas support

[mbwhite]

I've been reviewing the code to check if it's possible to apply Croppr.is to a canvas.
Would this be possible?

I understand that the aim of Croppr is get the size selection and then crop later.

[jamesssooi]

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.

[mbwhite]

@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.

[jamesssooi]

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.

[mbwhite]

@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.

[signalpoint]

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