使用javascript将文本转换为图像

Question

有什么办法可以将输入文本转换为图像.我正在尝试做的是在文本框中键入一些文本并将其显示在div上.当我单击按钮时,复制到div的文本应更改为图像.有人对这个有了解吗？提前致谢!

Answer 1

您可以使用隐藏的画布元素并使用它将其转换为图像toDataURL.您的代码看起来像这样:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
// Text input element
document.getElementById('textInput').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);
?

演示