捕獲寫在畫布上的圖像的寬度

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將包含畫布上的文本的寬度。

Demo