Question

我试图通过canvas标签读取图像数据，每当我尝试检索并显示该数据时，它都会出现0。即使我将数据限制限制在1个像素，也会出现＆＃34; 0,0,0,0和＃34;。奇怪的是我可以使用fillRect并检索该数据，但在绘制图像时它会出现零。我将使用此脚本比较像素以确定模式是否可重复，但首先我需要确保我可以首先读取该数据。

以下是我的代码。我有点旧时尚，并使用文本编辑器和浏览器进行测试。因此，我不会对某些人使用的任何WYSIWYG编辑器进行此操作。您只需使用图像并更改源以使其在本地工作。虽然我可以在其他地方设置它。但

我希望我能够了解为什么这不起作用。

    <!DOCTYPE HTML>
    <html>
        <head>
            <style type="text/css">
                body { background-color:#dedddd }
                canvas { background-color:white; padding:20px }
                #colorInfo { width:300px; background-color:white; padding:20px }
            </style>
        </head>
        <body>
            <canvas id="iLikeCookies" width="300" height="300">Your browser kinda sucks.  Can't even draw a canvas.  For shame.</canvas>
            <div id="header"></div>
            <div id="colorInfo"></div>
            <script>
                var canvas = document.getElementById('iLikeCookies');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                pixelData = '';

                // function to read all pixels and build into string of RGBa values.
                var read = function() {
                    // loop through each row
                    for(var y = 0; y < canvas.height; y++) {
                        // loop through each column
                        for(var x = 0; x < canvas.width; x++) {
                            // grabbing individual pixel data
                            var red = pixels[((canvas.width * y) + x) * 4];
                            var green = pixels[((canvas.width * y) + x) * 4 + 1];
                            var blue = pixels[((canvas.width * y) + x) * 4 + 2];
                            var alpha = pixels[((canvas.width * y) + x) * 4 + 3];
                            // adding current pixel data to string
                            pixelData += "RGBa(" + red + ", " + green + ", " + blue + ", " + alpha + ") <br/>";
                        }
                    }
                };

                img.onload = function() {   
                    ctx.drawImage(img, 0, 0, 300, 300);
                };

                // ctx.fillStyle = "rgb(123,40,170)"
                // ctx.fillRect(0,0,300,300)
                img.src = 'pattern2.jpg';
                imgData = ctx.getImageData(0, 0, canvas.width-299, canvas.height-299);
                pixels = imgData.data           
                read();
                console.log(img.width + ", " + img.height);
                document.getElementById("header").innerHTML = "Here are the " + canvas.height*canvas.width + " pixels found in the image.<br/>";                
                document.getElementById("colorInfo").innerHTML = pixelData;
                console.log(pixelData);

            </script>
        </body>
    </html>

Answer 1

将代码从imgData = …开始放在img.onload函数中，并设置img.crossOrigin = 'anonymous';以摆脱SecurityError：

img.crossOrigin = 'anonymous';
img.src = 'pattern2.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0, 300, 300);

  // ctx.fillStyle = "rgb(123,40,170)"
  // ctx.fillRect(0,0,300,300)

  imgData = ctx.getImageData(0, 0, canvas.width - 299, canvas.height - 299);
  pixels = imgData.data
  read();
  console.log(img.width + ", " + img.height);
  document.getElementById("header").innerHTML = "Here are the " + canvas.height * canvas.width + " pixels found in the image.<br/>";
  document.getElementById("colorInfo").innerHTML = pixelData;
  console.log(pixelData);
};

无法使用getImageData

1 个答案: