Question

我正在文本框中输入的文本生成图像。我需要从生成的图像中获取像素。现在我正在做以下

      tCtx.fillText(entered_text, 20, 40);
      imageElem.src = tCtx.canvas.toDataURL("image/png");

      var imageData = tCtx.getImageData(0, 0, tCtx.canvas.width, tCtx.canvas.height);
      var px = imageData.data;      
      var len = px.length;

      for (var i = 0; i < len; i+=4) {
          var redPx = px[i];
          var greenPx = px[i+1];
          var bluePx = px[i+2];
          var alphaPx = px[i+3];
          console.log(redPx,greenPx,bluePx);
      }

此处控制台仅为每个像素打印全部0。但是在画布中我看到了图像，当我给了toDataURL（）时，在图像标签中我也看到了图像。不知道怎么做。

当我使用文本以外的自定义图像时，我得到像素数据， 34 45 255 255 54 56 210 255 ...

Answer 1

您还需要将Alpha通道打印到控制台。所有像素我也收到0,0,0。由于默认画布的背景是（0,0,0,0），它是透明的。黑色字体是（0,0,0，noneZeroValue）:(由于抗锯齿，可能不是255）。如果您不打印Alpha通道，则所有通道都将为0,0,0。

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="100" height="20" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //ctx.font = "48px serif";
ctx.fillText("A lot of text", 0, 10);
//ctx.drawImage(ocanvas,0,0,c.width,c.height);
var imageData = ctx.getImageData(0, 0, c.width, c.height);
      var px = imageData.data;      
      var len = px.length;

      for (var i = 0; i < len; i+=4) {
          var redPx = px[i];
          var greenPx = px[i+1];
          var bluePx = px[i+2];
          var alphaPx = px[i+3];
          //if (redPx!=0 || greenPx!=0 ||bluePx!=0 || alphaPx!=0){
          console.log(redPx,greenPx,bluePx,alphaPx);


}                  

};


</script>

</body>
</html>

Answer 2

我找到了解决方案。我现在做的是

tCtx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

因为这个我在画布外面显示图像。所以，它是不可见的。然后我把它改成了

tCtx.putImageData(imageData, 0, 0);

现在，没关系。能够获得像素数据

如何从Canvas获取Pixel数据

2 个答案: