I'm trying to use CORS enabled image which is located on cors-enabled site: dropbox.
I've got an error: cross-origin image load denied by CORS policy.
How to fix it?
<html>
<body>
<img id="output" src="#"/>
<script>
var img = new Image();
img.crossOrigin = "anonymous";
var canvas = document.createElement("canvas");
img.onload = function () {
canvas.width = img.width;
canvas.height = img.width;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
}
img.src = ".png";
var output = document.getElementById("output");
output.src = canvas.toDataURL("image/png");
</script>
</body>
I'm trying to use CORS enabled image which is located on cors-enabled site: dropbox..
I've got an error: cross-origin image load denied by CORS policy.
How to fix it?
<html>
<body>
<img id="output" src="#"/>
<script>
var img = new Image();
img.crossOrigin = "anonymous";
var canvas = document.createElement("canvas");
img.onload = function () {
canvas.width = img.width;
canvas.height = img.width;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
}
img.src = "https://www.dropbox./s/54an0126onoxezj/stone1.png";
var output = document.getElementById("output");
output.src = canvas.toDataURL("image/png");
</script>
</body>
2 Answers
Reset to default 7The page you're linking to isn't CORS-enabled, but you don't actually want to download that page (which is HTML) anyway. You want the image that is displayed there. A direct link to that file is CORS-enabled: https://dl.dropboxusercontent./s/54an0126onoxezj/stone1.png.
The way to convert a share link to a direct link is to change the domain from www.dropbox. to dl.dropboxusercontent.. See https://www.dropbox./developers/blog/53/programmatically-download-content-from-share-links.
I'm trying to use CORS enabled image which is located on cross-enabled site: dropbox..
Dropbox isn't "cross-enabled".
Correction: It appears that Dropbox's public folder is, but the URL you are using is not.
I've got an error: cross-origin image load denied by CORS policy.
And that's the evidence that it isn't
How to fix it?
Since you have no way of reconfiguring Dropbox's server to give you permission, you have to get the image from some other source. e.g. proxy them through your own server.
If you were able to reconfigure the server, then you would enable CORS:
Access-Control-Allow-Origin: https://your.site.example.