如何从画布中获取像素数据
如何从画布中获取像素数据
提问于 2015-11-20 11:16:01
我正在从文本框中输入的文本生成图像。我需要从生成的图像中获取像素。现在我正在做以下工作
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…
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-20 16:14:43
你也需要打印阿尔法通道到控制台。我还收到了所有像素的0,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>Stack Overflow用户
发布于 2015-11-20 14:03:45
我找到了解决办法。我现在所做的就是
tCtx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);正因为如此，我在画布的外面显示图像。所以，它是看不见的。然后我把它改成
tCtx.putImageData(imageData, 0, 0);现在一切都好了。能够获得像素数据
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33825364
复制相关文章
相似问题
腾讯云开发者
