canvas has been tainted by cross-origin data work around

后端未结

关注

 5  644

im writing a script (or editing and hacking things together) to edit the look of images on a page. I know the basics of javascript but this is my first time looking at canva

相关标签:

5条回答

不要未来只要你来

2020-12-05 16:58

To satisfy CORS, you can host your images on a CORS friendly site like dropbox.com

Then the security error will not be triggered if you speify image.crossOrigin="anonymous":

    var image=new Image();
    image.onload=function(){
    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/4djSr/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var image=new Image();
    image.onload=function(){
        ctx.drawImage(image,0,0);

        // desaturation colors
        var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        var data=imgData.data;

        for(var i = 0; i < data.length; i += 4) {
          var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2];
          data[i]=grayscale;
          data[i+1]=grayscale;
          data[i+2]=grayscale;
        }

        // write the modified image data
        ctx.putImageData(imgData,0,0);

    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=140 height=140></canvas>
</body>
</html>

0 讨论(0)

长发绾君心

2020-12-05 17:06
I found it works with chrome if you create a windows shortcut like this:
```
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
```
Shut down chrome and start it via your shortcut.

Source: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Related post: Cross-origin image load denied on a local image with THREE.js on Chrome

I assume you are working with a local file without any web server.
0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2020-12-05 17:14
Try adding crossorigin="anonymous" to the image element. For example
```
<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2020-12-05 17:15
I don't have enough reputation to actually add a comment (but I do have enough to respond to the question, huh??), I just wanted to add to markE's answer that I had to capitalize Anonymous.
```
image.crossOrigin = "Anonymous"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
刺人心

2020-12-05 17:19

Enabling CORS on the server side is a way out, But that's if you have access to the server side. That way the server serves CORS enabled images.

0 讨论(0)
发布评论:

提交评论
- 加载中...