jquery - 捕捉画布图像上所写内容的宽度

Question

JsFiddle： http: //jsfiddle.net/K34a7/ 我正在创建一个 div 并在其中保存图像。我想知道如何检测图像中写入的部分的宽度，以便我可以动态分配 div 的宽度大小而不是整个图像？

document.getElementById('text').addEventListener('keyup', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
var t = this.value.split('\n');
tCtx.canvas.height = t.length*10;

console.log(t);
var y = 10;
for(var i=0; i<t.length; i++, y+=10) {
tCtx.fillText(t[i], 0, y);
}

//console.log('Value: ' + this.value);
imageElem.src = tCtx.canvas.toDataURL();
//console.log(imageElem.src);
}, false);

Answer 1

您已经measureText在代码中使用了。只需像这样添加对宽度的引用

var textWidth = tCtx.measureText(this.value).width;

textWidth将包含画布上文本的宽度。

演示