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.
Asked
Active
Viewed 4,593 times
2
-
1try to take a look [to this answer](https://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring) In any case I assume there should be a download method – gaetanoM Aug 11 '18 at 21:46
-
@gaetanoM, Thank you for your response. I take a look at download method. – yW0K5o Aug 11 '18 at 22:05
2 Answers
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.
yW0K5o
- 913
- 1
- 17
- 32
-
Here's the actual API reference http://nhn.github.io/tui.image-editor/latest/ImageEditor#toDataURL – Klemen Tusar May 29 '19 at 20:40
-
it also opens a new window/tab showing image. how to prevent that ?? i don't want a new window – Kunal Burangi Nov 04 '19 at 11:38
1
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.
Amandeep Singh
- 156
- 1
- 8