JavaScript 畫布 drawImage getImageData

Question

我無法理解兩種方法如何與畫布一起工作： drawImage getImageData 實際上，我想將位圖圖像解析為一個 RGBA 點數組，能夠轉換它並使用 putImageData 方法顯示它。 但只有一件事有效：drawImage 或 getImageData。 我尋求幫助 - 解釋這些方法如何相互影響。

<!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>

Answer 1

您需要將圖像對象上的跨域標志設置為“匿名”。

My_img.crossOrigin = "Anonymous";

另請參閱：如何修復 getImageData() 錯誤畫布已被跨域數據污染？

演示

 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 畫布 drawImage getImageData

問題描述

1 個解決方案

解決方案1
0 已采納 2020-02-11 18:59:55

演示

JavaScript 畫布 drawImage getImageData

問題描述

1 個解決方案

解決方案1 0 已采納 2020-02-11 18:59:55

演示

解決方案1
0 已采納 2020-02-11 18:59:55