如何從畫布獲取像素數據

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。 但是在Canvas中，我看到的是圖像，當我將其賦予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);

現在，很好。 能夠獲取像素數據

如何從畫布獲取像素數據

問題描述

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