Change pixels on canvas. It does not work in Chrome

Question

Change pixels on canvas. It does not work in Chrome. But when I execute this code in NetBeans IDE it works!! Why? I'm going crazy...

<canvas id="myCanvas" width="100" height="300" style="border:1px solid #d3d3d3"></canvas>
    <br />
    <img id="myImg" src="flash-back.jpg" />
    <script type="text/javascript">
        var c,img,ctx;
        window.onload = function(){
            c = document.getElementById("myCanvas");
            img = document.getElementById("myImg");
            ctx = c.getContext("2d");
            ctx.drawImage(img,0,0,80,50);
            var imgData = ctx.getImageData(0, 0, 80, 50);
            alert(imgData.data.length);
            for(var i = 0; i < imgData.data.length; i += 4){
                imgData.data[i]=255-imgData.data[i];
                imgData.data[i+1]=255-imgData.data[i+1];
                imgData.data[i+2]=255-imgData.data[i+2];
                imgData.data[i+3]=255;
            }
            ctx.putImageData(imgData, 0, 70);
        };
    </script>

thanks!! I have an error: "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." How can I solve that? — Moses91, Feb 22 '16 at 19:37
Your solution is to comply with cross-origin security requirements. The simplest way is to have your images served from the same domain as your web page code. Here's a [previous Q&A](http://stackoverflow.com/questions/34743987/canvas-image-crossplatform-insecure-error/34755162#34755162) with more details. Good luck with your project! :-) — markE, Feb 22 '16 at 19:43
Thank you ! I loaded the file from apache server and it works ! Thank you! =) — Moses91, Feb 22 '16 at 20:31

score 0 · Accepted Answer · answered Feb 21 '16 at 07:39

0

do you have your flash-back.jpg in the same folder as your html?

answered Feb 21 '16 at 07:39

Kilian Hertel

166
1
14

Yes, I have no problem with the image , and I think the code is perfect ...really I do not understand it does not work – Moses91 Feb 21 '16 at 08:04

Change pixels on canvas. It does not work in Chrome

1 Answers1