canvas.toDataURL doesn't respect stencil

[andreasvirkus]

Hi, thanks for an awesome component! The docs are great and the component is very easy to use 💯

I have an issue with calling

const { canvas } = this.$refs.cropper.getResult()

this.$emit("submit", canvas.toDataURL())

with both the default CircleStencil and the advanced stencil example. The result is always a rectangle with full corners.

I've also created a replication here:

https://codesandbox.io/s/vue-sc4k6

My current workaround is to apply a small border radius to the image that displays the result, but ideally (especially with maybe changing the stencil in the future), I'd like a way to get the image cropped by the stencil 🙏

[Norserium]

Hello, @andreasvirkus!

First of all, thanks for so detailed the issue description.

Unfortunately, it's not possible by the means of this library, because the stencil just defines the rectangle area that will be cropped. Moreover, it's pretty often practice to crop a square by the circle stencil.

But you can anyway process a rectangle canvas to get the needed result (if you want to use this method, test it on different browsers before to use one in production):
https://codesandbox.io/s/vue-xeb59

[andreasvirkus]

Well, that seems to work perfectly! 🎉 Thank you so much, my canvas-fu was too weak for this

[Norserium]

You are welcome!

[yellow1912]

This is great content, please add it to the document if you can. It will save people like me tons of time digging the old issues.

[Norserium]

@yellow1912 , I will try to think out how to place it in the documentation, taking into account that the mentioned issues are still edge cases.