Question

我有一个画布，里面装满了画布的fillText函数。现在我想获得这个画布的图像数据。

var texttodraw = "hello world";
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = '16px serif';
ctx.fillStyle = "#00ff00"; 
ctx.fillText(txttodraw, 0, 0);
console.log('the text is: ' + txttodraw);
canvas.width = ctx.measureText(txttodraw).width;
canvas.height = 16;
console.log('the image size is: ' + canvas.width + ' x ' + canvas.height);  

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData);

数组＆＃34; imageData＆＃34;获得高度和宽度以及包含我需要的像素数据的数组。但不幸的是，这个代码我得到一个充满零的数组。控制台输出是：

ImageData { width: 24, height: 16, data: Uint8ClampedArray[1536] }

当我点击数据数组时，我发现它只包含零值..

＆＃39; Uint8ClampedArray [0,0,0,0,0,0,0,0,0,0,1526更多...]＆＃39;

我有一个类似于画布的代码，里面有一个用canvas.drawImage()绘制的图像，这是有效的（数据数组包含画布中每个像素的rgb值......）。

我做错了什么？

Answer 1

您必须为上下文设置 textBaseline 属性为top，因为默认情况下基线设置为底部绘制文本，使文字不可见如果在0, 0位置绘制，则在画布区域内。

在绘制文字之前，您还需要设置画布的width和height。

var texttodraw = "hello world";
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

ctx.font = '20px Verdana';
canvas.width = ctx.measureText(texttodraw).width;
canvas.height = 20;

ctx.font = '20px Verdana';
ctx.textBaseline="top"; 
ctx.fillText(texttodraw, 0, 0);

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// check if image data array contains values other than 0
var data = imageData.data.filter(function(e) {
	return e !== 0;
});
console.log(data);

canvas.getImageData返回一个空数组，其中一个画布填充了canvas.fillText

1 个答案: