时间戳

首页 > 解决方案 > Canvas 内的 HTML 文本

javascript - Canvas 内的 HTML 文本

问题描述

我需要渲染一张图片，上面放了一些 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}}";

标签： javascriptlaravelcanvas

解决方案

当你说“渲染 html 标签”时，你想达到什么目的？
您的意思是要对画布上绘制的文本进行样式设置？
如果是这样，您必须使用画布函数来设置文本的外观。
在下面使用您的代码的示例中，我使用“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>

在画布上绘制的文本在我的屏幕（Ubuntu/Chrome）上看起来被挤压，不知道为什么。

推荐阅读