如何从画布获取像素数据

Question

I am generating the image from the entered text in the text box. 我正在从文本框中输入的文本生成图像。 I need to get the pixel from the generated image. 我需要从生成的图像中获取像素。 Right now I am doing the following 现在我正在做以下

      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);
      }

Here the console prints the all 0's only for each pixel. 在这里，控制台只为每个像素打印全0。 But in the Canvas I am seeing the image, when I gave that toDataURL(), in image tag also I am seeing the Image. 但是在Canvas中，我看到的是图像，当我将其赋予toDataURL（）时，在图像标签中也看到了图像。 Don't know how. 不知道怎么做

When I use the custom images other than the text, then I am getting the pixel data like, 34 45 255 255 54 56 210 255 ... 当我使用自定义图像而不是文本时，则得到了像素数据，例如34 45 255 255 54 56 210 255 ...

Answer 1

You need to print Alpha channel to console as well. 您还需要打印Alpha通道来进行控制台。 I also received 0,0,0 for all pixels. 我还收到了所有像素的0,0,0。 Since default canvas's background is (0,0,0,0) which is transparent. 由于默认画布的背景是（0,0,0,0），因此背景是透明的。 And black font is (0,0,0,noneZeroValue): (could be not 255 because of antialising). 黑色字体为（0,0,0，noneZeroValue）：（由于抗锯齿，所以不能为255）。 If you won't print alpha channel all of them will be 0,0,0. 如果您不打印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

I found the solution. 我找到了解决方案。 What i did right now is 我现在所做的是

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

because of this I am displaying the image out side of the canvas. 因此，我将图像显示在画布的外侧。 So, it is not visible. 因此，它是不可见的。 Then I changed it to 然后我将其更改为

tCtx.putImageData(imageData, 0, 0);

now, it is fine. 现在，很好。 Able to get the pixel data 能够获取像素数据

如何从画布获取像素数据

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-11-20 16:14:43

解决方案2
0 2015-11-20 14:03:45

如何从画布获取像素数据

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-11-20 16:14:43

解决方案2 0 2015-11-20 14:03:45

解决方案1
1 已采纳 2015-11-20 16:14:43

解决方案2
0 2015-11-20 14:03:45