使用照片编辑器 SDK 从 URL 编辑照片答案

【问题标题】：Edit Photo from URL with Photo Editor SDK使用照片编辑器 SDK 从 URL 编辑照片
【发布时间】：2018-07-30 17:30:57
【问题描述】：

我在我的应用程序中使用PhotoEditorSDK，但我收到了附加的错误。在附件中还遵循了我用来得出这些结果的代码。

好像是跨域问题

但 SDK 有一个特定的部分。我在公司的支持下打开了电话，但到目前为止还没有。如果有人已经遇到过这个问题，知道原因，或者如何解决。请帮助我;-;

"use stricts";
/*link = http://localhost:8080/editar?&page=1&url=https://photos.google.com/lr/photo/AGj1epXDcMoRlOQ7QcWY9dZ2ALBIqhfJuTSz-ywrilsUhstrZ7wo26XkgDSBk4Jx2nJuIPm3LCFoKuo
*/
var editor;
var vars = getUrlVars();
var page = vars.page;
var url = vars.url;
window.onload = function () {
    var container = document.getElementById('editor');
    var img = new Image();
    img.src = url;
    editor = new PhotoEditorSDK.UI.ReactUI({
        container: container,
        enableUpload: false,
        crossOrigin: 'anonymous',
        editor: {
            image: img,
            responsive: true,
            enableZoom: false,
            controlsOrder: ['transform', 'filter', 'adjustments', 'focus'],
            export: {
                download: false,
                format: 'image/jpeg',
                type: PhotoEditorSDK.RenderType.BLOB
            },
        },
        //your license below
        license: 'license',
        assets: {
            baseUrl: '/assets'
        },
    });
}

function getUrlVars() {
    console.log(window.location.href);
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf("#") + 1).split("&");
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split("=");
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

<html>
<head>
<script src="/js/jquery-1.11.3.min.js"></script>
<!-- React Dependencies for the SDK UI -->
<script src="js/vendor/react.production.min.js"></script>
<script src="js/vendor/react-dom.production.min.js"></script>
<!-- PhotoEditor SDK-->
<script src="js/PhotoEditorSDK.min.js"></script>
<!-- PhotoEditor SDK UI -->
<script src="js/PhotoEditorSDK.UI.ReactUI.min.js"></script>

<link rel="stylesheet" href="css/PhotoEditorSDK.UI.ReactUI.min.css" />
</head>
<body>
<div id="editor" style="width: 100%; height: 100%; padding-top: 65px;"></div>

<script src="js/editar.js"></script>
</body>
</html>

【问题讨论】：

你如何得到下面两个文件

标签： javascript photoeditorsdk

【解决方案1】：

您需要等待图片加载后才能将其推送到 PhotoEditorSDK。

您应该将您的 editor = 代码块移动到 img.onload="" 方法中。

问候，

【讨论】：

【解决方案2】：

在控制台中，有错误消息说资源由于同源策略而无法加载。

您要做的是为加载的资源启用CORS（跨域资源共享）。您可以查看更多信息here。

但是，您可能无法控制加载的资源（例如，允许用户通过指定外部 URL 添加图像）。

在这种情况下，您应该考虑实现一个 PHP“代理”，它将在您的服务器上下载图像（注意同源策略适用于浏览器），然后将该图像提供给前端。你有两个选择：

将图像存储在服务器的文件系统中并继续 URL。
直接将图像内容提供给客户端，例如您可以在base64 中编码图像并通过XHR 请求检索它。

【讨论】：