javascript - canvas has been tainted by cross-origin data work around

Question

Welcome To Ask or Share your Answers For Others

javascript - canvas has been tainted by cross-origin data work around

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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 canvas. so bear with me

I'm getting this error:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

so heres my code snippet throwing the error:

var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            height = img.naturalHeight || img.offsetHeight || img.height,
            width = img.naturalWidth || img.offsetWidth || img.width,
            imgData;


        canvas.height = height;
        canvas.width = width;
        context.drawImage(img, 0, 0);

        console.log(context);
        try {
            imgData = context.getImageData(0, 0, width, height);
        } catch(e) {}

now i found this post :

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

but i have no idea how to make it fit my needs..

I know its all due to security and all that - but is there a work around to make it all happen?

Thanks

EDIT

Oh wait.. the error is because you can't getImageData.. so is there away to make it 'local'

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

557 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:51:20+0000

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>

Categories

javascript - canvas has been tainted by cross-origin data work around

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags