使用JavaScript将文本转换为图像 [英] Convert Text to Image using javascript

问题描述

有什么办法可以将输入文字转换成图像。我正在尝试做的是在文本框中输入一些文本并将其显示在div上。当我点击按钮时，复制到div的文本应该更改为图像。 Any1知道这件事？提前致谢！

解决方案

您可以使用隐藏的canvas元素并使用 toDataURL 。你的代码看起来像这样：

  var tCtx = document.getElementById（'textCanvas'）。getContext（'2d'） ，//隐藏画布
 imageElem = document.getElementById（'image'）; //图像元素
 //文本输入元素
 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）; 
 
  

演示

Is there any way i can convert the input text into image. What i am exactly trying to do is type some text into textbox and display it on div. When i click on button the text copied to div should be changed to image. Any1 know anything about this?? Thanks in advance!

解决方案

You can do this using a hidden canvas element and converting that to an image using toDataURL. Your code would look something like this:

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);
​

Demo

这篇关于使用JavaScript将文本转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！