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.

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.

• javascript
• toast-ui-image-editor

Share Improve this question Follow edited Apr 24, 2024 at 5:30 Andrew Gaul 2,41211 gold badge1414 silver badges1919 bronze badges asked Aug 11, 2018 at 21:26 yW0K5oyW0K5o 94311 gold badge1818 silver badges3434 bronze badges 2

• 1 try to take a look to this answer In any case I assume there should be a download method – gaetanoM Commented Aug 11, 2018 at 21:46
• @gaetanoM, Thank you for your response. I take a look at download method. – yW0K5o Commented Aug 11, 2018 at 22:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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.