如何在 TOAST UI 组件图像编辑器中访问画布？

Question

I use TOAST UI Component Image Editor on a webpage. I'd like to to save the image to Base64 string. There are no properties in imageEditor object to allow me to access the edited image in canvas. I searched Google and Stackoverflow, no results.

Answer 1

I checked the file tui-image-editor.js for download function as suggested by gaetanoM.

The solution is to call for base64 string of the edited image. The base64 string starts after the data:image/png;base64, prefix.

imageEditor.toDataURL();

Where imageEditor is a global JavaScript variable declared during image load.

Answer 2

It is using fabric.js library. You can access the canvas object directly by :

ImageEditor._graphics.getCanvas();

it will give you a fabric object, assign this to some variable and you can use fabric.js functions with this.