0

I'm trying to manipulate an image and display its image data, but it's not working.

The following code is copied verbatim from w3Schools.com: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_getimagedata2

The only thing I've changed is the src/address of the image.

It runs on the w3schools site, but when I try to do this on my own computer, it copies the image without modifying it.

What's going on here?!

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] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
<!DOCTYPE html>
<html>
<body>

<img id="scream" src="file:///C:/Users/16039/Pictures/Memes/theScream.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>
</body>
</html>
Shashikant Yadav - Kantbtrue
  • 808
  • 6
  • 12
Mike
  • 31
  • 1
  • 2
  • 1
    file protocol causes a CORS issue, see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image – Teemu Jan 29 '21 at 18:31
  • You will need to run this on a local server for it to work, as the image _needs_ to be from the same, safe host for a browser to work with it (to prevent any issues with untrusted files). Once you add such an untrusted image to a canvas, you can no longer read and write direct data to it, again, for safety (internet's a dangerous place, you know). You can look into something like Express (using node) or MAMP if you want a little bit more of a GUI. – somethinghere Jan 29 '21 at 18:34
  • You can make this also work by selecting the image manually to `` element. It provides some extra coding, though. – Teemu Jan 29 '21 at 18:51
  • 2
    @somethinghere you can still write ;-) only reading is blocked on tainted resources. – Kaiido Jan 30 '21 at 00:48

0 Answers0