I'm trying to use CORS enabled image which is located on cors-enabled site: dropbox.com.
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.com/s/54an0126onoxezj/stone1.png";
var output = document.getElementById("output");
output.src = canvas.toDataURL("image/png");
</script>
</body>
Dropbox isn't "cross-enabled".
Correction: It appears that Dropbox's public folder is, but the URL you are using is not.
And that's the evidence that it isn't
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:
The 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.com/s/54an0126onoxezj/stone1.png.
The way to convert a share link to a direct link is to change the domain from
www.dropbox.com
todl.dropboxusercontent.com
. See https://www.dropbox.com/developers/blog/53/programmatically-download-content-from-share-links.