为什么导出时无法从 photoeditorsdk 获取数据 url？

Question

我试图在导出事件处理程序中获取 URL，但它一直在输出图像数据。

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;

console.log(dataUrl) 行一直是图像数据，而不是真正的 URL。我已将导出类型设置为 "data-url"，但它仍然不起作用。

Answer 1

返回的值是一个数据 URI，正如您所指出的，它是作为编码字符串的图像数据。 https://css-tricks.com/data-uris/ 提供了一些有关它们如何工作的快速信息。从那个页面借用一些信息来展示它是如何工作的：

您可以像这样在 CSS 中使用它：

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

或者在 HTML 中这样：

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

我不相信 PhotoEditorSDK 会为您托管图像；您必须将图像上传到您自己的服务器并生成您自己的 URL.

为什么导出时无法从 photoeditorsdk 获取数据 url？

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

photoeditorsdk