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 - 如何將文本轉換爲圖像

回答

相關問題