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.
Share Improve this question edited Apr 24, 2024 at 5:30 Andrew Gaul 2,4121 gold badge14 silver badges19 bronze badges asked Aug 11, 2018 at 21:26 yW0K5oyW0K5o 9431 gold badge18 silver badges34 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
2 Answers
Reset to default 4I 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.