HTML Canvas 內的文本

Question

我需要渲染一個圖像，我在上面放了一些 HTML 文本，然后用戶能夠下載帶有文本作為圖像的圖像，甚至更好地下載為 pdf。

certText 元素取自 TinyMCE 變量，其中用戶每次在文本中使用不同的 HTML 標記。

所以它可能是

“您好用戶，您好嗎”或“您好，很高興您通過了認證”。

從我在下面的代碼中創建的圖像選項開始，但 Canvas 不翻譯 HTML 標簽。 我已經閱讀了 Canvas 無法呈現 HTML 標簽，但是還有其他替代方法可以成功。 該代碼用於我制作的 Laravel 項目。

var p = document.getElementById("certificate");
var ptx = p.getContext("2d");
var imgp = document.getElementById("certificateEmpty");
var txtp = document.getElementById("certText").innerHTML;
imgp.onload = function(){
ptx.drawImage(imgp, 0, 0);
ptx.font = "48px Nunito";
ptx.fillText(txtp, 150, 1000);
};
imgp.src = "{{$attendees[0]->certBLocation}}";

Answer 1

當你說“渲染 html 標簽”時，你想達到什么目的？
您的意思是要設置在 canvas 上繪制的文本的樣式嗎？
如果是這樣，您必須使用 canvas 函數來設置文本的外觀。
在下面使用您的代碼的示例中，我使用“fillStyle”來設置繪制文本的繪圖填充顏色。

 var p = document.getElementById("certificate"); var ptx = p.getContext("2d"); var imgp = document.getElementById("certificateEmpty"); var txt = document.getElementById("certText"); var txtp = txt.innerHTML; imgp.onload = function(){ ptx.drawImage(imgp, 0, 0, p.width, p.height); var styles = window.getComputedStyle(txt); ptx.fillStyle = styles.color; //ptx.font = styles.font; // Doesn't seem to work in firefox. ptx.font = styles['font-weight']+" "+styles['font-size']+" "+styles.fontFamily; // Access properties array style because of hyphens. ptx.fillText(txtp, 0, 100); }; imgp.src = "https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=200";

 img, canvas { width: 200px; height: 200px; } #certText { color: #ff0000; font-weight: bold; font-size: 40px; }

 <img id="certificateEmpty"/> <canvas id="certificate"></canvas> <div id="certText"> some text </div>

canvas 上繪制的文本在我的屏幕（Ubuntu/Chrome）上看起來被壓扁，不知道為什么。