javascript - 使用javascript将文本转换为图像

Question

<分区>

Answer 1

您可以使用隐藏的 Canvas 元素并使用 toDataURL 将其转换为图像来执行此操作。您的代码看起来像这样:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
  
// Text input element
document.getElementById('text').addEventListener('keyup', function() {
  tCtx.canvas.width = tCtx.measureText(this.value).width;
  tCtx.fillText(this.value, 0, 10);
  imageElem.src = tCtx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

Demo