JavaScript canvas drawImage getImageData

Question

I cannot reach an understanding of how 2 methods work with canvas: drawImage getImageData in fact, I would like to parse the bitmap image into an array of RGBA points, be able to convert it and display it using the putImageData method. But only one thing works: drawImage or getImageData. I ask for help - explain how these methods influence each other.

<!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title> Canvas to array </title>
     </head>
<body>
    <canvas id="canvas" width="1200" height="600" />
    <script>
      "use strict"
      let imageData;
      let My_img = new Image();
      My_img.src = 'test1.jpg';
      let cnv = document.getElementById("canvas");
      let ctx = cnv.getContext("2d");
      My_img.onload = function() {
          ctx.drawImage(My_img, 0, 0);
          imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          for (let i=0; i<imageData.data.length; i+=4){
             imageData.data[i]=0;
             imageData.data[i+1]=255;
             imageData.data[i+2]=0;
             imageData.data[i+3]=222;
          }
         ctx.putImageData(imageData,300,300);
      };
    </script>
</body>
</html>

I'm afraid your question isn't too clear - what is your concrete problem? (by the way, you're for-loop is manipulating the data and you're effectively setting each pixel to green - what's that good for?) — obscure, Feb 11 '20 at 18:45
ctx.putImageData(imageData,300,300); // does not display anything, green is just an example of changing an array. — Alexandr Turin, Feb 11 '20 at 18:47
Yeah I see that, it just doesn't make sense. ;) Or do you mean the problem is that it doesn't actually put your data to the canvas? — obscure, Feb 11 '20 at 18:50
yes - I can’t place them, or I can’t read them using getImageData — Alexandr Turin, Feb 11 '20 at 18:51
Well your code snippet just works fine - what exactly is the problem? — obscure, Feb 11 '20 at 18:54
I only see my picture drawn with the drawImage method. Where are all my green pixels?) — Alexandr Turin, Feb 11 '20 at 18:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207609/discussion-between-obscure-and-alexandr-turin). — obscure, Feb 11 '20 at 18:55
@AlexandrTurin In my example below, you need to RETAIN the original pixel values and scale them by a factor (while binding them to a minimum of 255 aka 0xFF). — Mr. Polywhirl, Feb 11 '20 at 19:01

score 0 · Accepted Answer · answered Feb 11 '20 at 18:59

You need to set the cross-origin flag on the image object to be "Anonymous".

My_img.crossOrigin = "Anonymous";

See also: How to fix getImageData() error The canvas has been tainted by cross-origin data?

Demo

let ctx = document.getElementById("canvas").getContext("2d");
let img = new Image();
img.crossOrigin = "Anonymous";
img.src = 'https://placekitten.com/200/138';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  setTimeout(() => filterImage(ctx), 1000);
};

// Multiply the value of the red channel by 2 and the blue channel by 3.
function filterImage(ctx) {
  let d = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
  for (let i = 0; i < d.data.length; i += 4) {
    d.data[i + 0] = Math.min(Math.floor(d.data[i + 0] * 2.0), 0xFF); // R
    d.data[i + 1] = Math.min(Math.floor(d.data[i + 1] * 1.0), 0xFF); // G
    d.data[i + 2] = Math.min(Math.floor(d.data[i + 2] * 3.0), 0xFF); // B
    d.data[i + 3] = 0xFF;                                            // A
  }
  ctx.putImageData(d, 0, 0);
}

<canvas id="canvas" width="200" height="138" />

JavaScript canvas drawImage getImageData

1 Answers1

Demo