Редактировать фото из URL с помощью Photo Editor SDK

Я использую 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>

введите описание изображения здесь

Источник

2 ответа

Вам нужно дождаться загрузки изображения, прежде чем отправлять его в PhotoEditorSDK.

Вы должны переместить editor = блок кода в img.onload="" метод.

С Уважением,

Источник

В консоли появляется сообщение об ошибке, в котором говорится, что ресурс не может быть загружен из-за политики одного источника.

Что вам нужно сделать, это включить CORS (совместное использование ресурсов из разных источников) для загруженного ресурса. Вы можете увидеть больше информации здесь.

Однако вы можете не иметь контроля над загруженными ресурсами (например, разрешить пользователям добавлять изображения, указав внешний URL-адрес).

В этом случае вам следует подумать о реализации "прокси-сервера" PHP, который будет загружать изображение на ваш сервер (например, политика одного и того же источника для браузеров), а затем передавать это изображение во внешний интерфейс. У вас есть два варианта:

  • Сохраните изображение в файловой системе вашего сервера и перейдите по URL.
  • Непосредственно доставьте содержимое изображения клиенту, например, вы можете закодировать изображение в base64 и получить его через XHR запрос.
Источник
Другие вопросы по тегам