0

I have been having a bear of a time trying to figure out why my colorization of a PNG won't work. I want to:

  1. create a canvas.
  2. draw a rectangle in it.
  3. clip the rect, so that subsequent drawing happens INSIDE the rect.
  4. bring in a couple of shapes INSIDE the rect.
  5. bring in a PNG (with transparent areas) inside the rect as well.
  6. Colorize the Png, in which the shapes underneath shows through the transparent areas and the PNG can togle thru any color.

I got so frustrated that I kept simpifying to get to the root of the problem, until I just copied the SIMPLEST piece of code from the W3schools site, and this simple image colorization doesn't work! Why does the simple example work when I look at it on the W3site but when I copy it VERBATIM onto my computer (change image name and src) it doesn't work?

I got the latest Chrome. Here's the code from W3schools. 

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="supportArt/scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (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] = 150;
    }
    ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>
T3 H40
  • 2,326
  • 8
  • 32
  • 43
bobcodenewbie
  • 53
  • 1
  • 8
  • What exactly does "doesn't work" mean? Are there errors in the console? Does something happen, but the wrong thing? If so, what is that thing? – Pointy Nov 02 '15 at 15:01
  • 1
    Are you getting a The canvas has been tainted by cross-origin data error? I just copied your code and encoded an image and it seems to kinda work jsfiddle.net/CanvasCode/0dat2jdw/1 but what error are you getting as @Pointy pointed out – Canvas Nov 02 '15 at 15:08
  • Hello... the html image is there and it shows also placed in the canvas, but with no colorization applied. The error says...Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. What does that mean? @Pointy – bobcodenewbie Nov 02 '15 at 15:33
  • If the image comes from a different domain, the browser won't let you examine the pixels. That's what "cross-origin" means. You can host the image on the same domain as the main page to get around that problem. – Pointy Nov 02 '15 at 15:35
  • Im just running this on my computer. Its all in a folder along with a "supportArt" folder. Do I need to upload to a real web site to test this? @Pointy – bobcodenewbie Nov 02 '15 at 15:40
  • Yes. Browsers consider every different local `file:` URL to be distinct domains. You can run a local web server, however, because local `http:` URLs will look like the same domain. – Pointy Nov 02 '15 at 15:41
  • Why not just host your image file via http://imgur.com/ and then img src that. That should fix your `tainted canvas` error – Canvas Nov 02 '15 at 16:39
  • Here is a previous post with workarounds to your cross-origin problem: http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported/22716873#22716873. BTW, the error is a security error and is raised because the browser is trying to prevent you from using html5 canvas to grab a user's private information -- like if you copy their bank login onto the canvas and then export the login as an image to the bad guys... – markE Nov 02 '15 at 22:11

1 Answers1

1

your code is absolutely fine for html5 supported browsers(as you mentioned you are using latest Chrome). you are facing a cross domain resource sharing (CORS)[http://www.html5rocks.com/en/tutorials/cors/] problem(though it's not a problem) while you are trying to run your html file using file://.. actually your "getImageData" will not work. the easiest solution is to host your files some where (for example box.com will also work) or if you are working locally then you may host it in IIS and browse it using http://localhost/ instead of file://. this will work fine.

enthusiast
  • 961
  • 7
  • 10