我正在根据文本框中输入的文本生成图像。我需要从生成的图像中获取像素。现在我正在做以下事情
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 ...
最佳答案
您还需要将 Alpha channel 打印到控制台。我还收到了所有像素的 0,0,0。由于默认 Canvas 的背景是(0,0,0,0)，它是透明的。黑色字体为 (0,0,0,noneZeroValue):(由于抗锯齿，可能不是 255)。如果您不打印 Alpha channel ，所有这些值都将是 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>
关于javascript - 如何从Canvas获取像素数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33825364/