Edit Photo from URL with Photo Editor SDK

Question

I'm using the PhotoEditorSDK in my application, but I'm getting the attached error. in the annex also follows the code that I used to arrive at these results.

It seems to be cross-origin problem

but the SDK has a specific part to it. I opened called with the support of the company, but so far nothing. If someone has already experienced this problem, know the reason, or how to solve. Please help me ;-;

"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>

how do you get bellow two file – jubair hridoy Jul 27 '21 at 10:27 — jubair hridoy, Jul 27 '21 at 10:27

score 0 · Answer 1 · answered Sep 07 '18 at 07:32

0

You need to wait for the image to load before pushing it to PhotoEditorSDK.

You should move your editor = block of code into the img.onload="" method.

Regards,

answered Sep 07 '18 at 07:32

Joel

2,185
4
29
56

score 0 · Answer 2 · answered Oct 30 '18 at 08:02

In the console, there's error message saying that the resource could not be loaded because of same-origin policy.

What you have to do is to enable CORS (Cross-origin resource sharing) for loaded resource. You can see more information here.

However, you may not have controll over loaded resources (e.g. allowing users to add image by specifying external URL).

In this case, you should think about implement a PHP "proxy" that will download image on your server (n.b. same-origin policy is for browsers) and then serve that image to the front-end. You have two options:

Store the image on your server's filesystem and proceed the URL.
Directly serve the content of image to the client, e.g. you could encode the image in base64 and retrieve it via XHR request.

Edit Photo from URL with Photo Editor SDK

2 Answers2