search

nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
http://ui.toast.com/tui-image-editor
MIT License
6.83k stars 1.26k forks source link

How can you modify the function of the download button? #876

Open afroCoderHanane opened 12 months ago

afroCoderHanane commented 12 months ago

I am trying to send the image asset to an API when the download is triggered, does anyone have an idea on how to accomplish that.

b-yp commented 11 months ago

I am trying to send the image asset to an API when the download is triggered, does anyone have an idea on how to accomplish that.

+1

faizux commented 10 months ago

I am trying to send the image asset to an API when the download is triggered, does anyone have an idea on how to accomplish that.

Give this a try: Use the toDataURL() method on the instance to retrieve the Base64 representation of the image/canvas. I experimented with something similar in a React component, and it was successful.

const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { includeUI: { ..., theme: { 'menu.normalIcon.color': '#8a8a8a', 'menu.activeIcon.color': '#555555', 'menu.disabledIcon.color': '#434343', 'menu.hoverIcon.color': '#e9e9e9', 'submenu.normalIcon.color': '#8a8a8a', 'submenu.activeIcon.color': '#e9e9e9', }, ... } });

const dataURL = instance.toDataURL(); console.log(dataURL)