If the picture is on Facebook - I can open it on canvas, edit and download, and if the picture is on the same server where my website is (000webhost.com), I get an error:

Access to Image at ' https://xxx.000webhostapp.com/ava1.png ' from origin ' https://xxx.000webhostapp.com ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

function Up() { //Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(); img.crossOrigin = "anonymous"; img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150"; img.onload = function() { ctx.drawImage(img, 0, 0, 480, 400); } } 

 function download() { //скачиванС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ var dt = canvas.toDataURL('image/jpeg'); this.href = dt; };

    1 answer 1

    It works with facebook because it sends an Access-Control-Allow-Origin header along with a picture: "*"

    Accordingly, in order to work from your host, you must configure the web server to issue these headers for pictures.

    • tell me how to do this?) I wrote in TP, no one answered, I have that third level domain - kuzmich
    • not the fact that your free hosting will allow you to do this. - netdog
    • if only a crutch is written, in the form of, for example, a php script, through which to load pictures and at the same time issue the necessary header through header (); but this is wrong :) - netdog