Javascript - 如何将文本转换为图像

我需要使用Javascript将文本转换为图像。我试过 convert-text-to-image-using-javascript。但是，在我的脚本中，我还在文本中使用了粗体&斜体。因为它不直接转换粗体，它只是显示正常文本。Javascript - 如何将文本转换为图像

对于防爆：如果我给这样的“小号粘性Ø版本˚F低”这给了“计算器”，而不是大胆的人

更新

我能在文本字段中输入粗体，斜体字符，但在我的JS端获得文本字段的值我正在获取正常文本。我还需要获得格式化文本。

来源

2015-11-05 Mallikarjuna

这里S是图像或文字？ –

什么是你确切的尝试..在哪里你可以输入风格的字体..在普通的HTML textarea？ – Sarath

你有我们的代码，所以我们可以检讨它吗？ – Hkidd

html输入或textarea不能管理不同的样式在他们的价值，你可以使用wysiwyg像this然后提取html并解析它。

根据我的例子链接，你可以这样做：

jQuery('.wysiwyg-editor').contents()

这将返回数组与所有的HTML元素，然后使用你已经什么之前tryed。

希望这个帮助

来源

2015-11-05 11:06:56 Vanojx1

我认为这很好，但我没有得到如何在我的HTML中使用 – Mallikarjuna

扩大quesiton /回答您已经检查

var tCtx = document.getElementById('textCanvas').getContext('2d'), 
    width, 
    imageElem = document.getElementById('image'); //Image element 
tCtx.font="30px Arial Bold" 
width = tCtx.measureText("S").width; 
tCtx.fillText("S", 0, 10); 
tCtx.translate(width, 0); 
tCtx.font="30px Arial" 
width = tCtx.measureText("tack").width; 
tCtx.fillText("tack", 0, 10); 
tCtx.translate(width, 0); 
tCtx.font="30px Arial Bold" 
width = tCtx.measureText("O").width; 
tCtx.fillText("O", 0, 10); 
tCtx.translate(width, 0);

等等...

imageElem.src = tCtx.canvas.toDataURL();

基本上，你必须改变字体样式和写入由上述文本块。

来源

2015-11-05 10:56:27 AndreaBogazzi

我们不能一个一个地改变，因为这是用户输入的动态文本。我们没有时他会使用粗体和他将使用斜体 – Mallikarjuna

另一种解决方案是使用fabricJS iText功能来呈现带有样式的文本。你需要的是一个富文本解析器，用于文本的fabricjs风格。检查fabricjs.com，看看它是否是你想要处理的东西。这将允许您处理颜色，下划线，敲击trought，不同的字体和背景颜色，开箱即用。 – AndreaBogazzi

不介意，我更新了这个问题。你可以检查一次 – Mallikarjuna

Javascript - 如何将文本转换为图像

回答

相关问题