Search code examples
photoeditorsdk

Why can't I get the data url from the photoeditorsdk on export?

I am trying to get a URL in the on export event handler but it keeps outputting the image data instead.

image.onload = function () {
            var container = document.getElementById('photoeditorSDK')
            const editor = new PhotoEditorSDK.UI.DesktopUI({
            container: container,
            // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
            license: 'mylicense',
            editor: {
              image: image,
              export:{
                    download:false,
                    type:"data-url"
              },
            },
            assets: {
              // This should be the absolute path to your `assets` directory
              baseUrl: '/js/photoeditorSDK/assets/'
          }
        });
        editor.on('export', (dataUrl) => {
            console.log(dataUrl);
        });
        }
        image.crossOrigin = "anonymous";
        image.src = data;

the console.log(dataUrl) line keeps being the image data instead of a real URL. I have set the export type as "data-url" and it still won't work.

Solution

  • The value returned is a data URI, which, as you've noted, is your image data as an encoded string. https://css-tricks.com/data-uris/ gives some quick info about how they work. Borrowing some information from that page to show how it works:

    You can use it in CSS like so:

    body {
  background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO...)
}

    Or in HTML like this:

    <img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQ..." />

    I don't believe PhotoEditorSDK hosts images for you; you'll have to upload the image to your own servers and generate your own URL.