对于 html2canvas 字体系列不起作用答案

【问题标题】：For html2canvas font-family is not working对于 html2canvas 字体系列不起作用
【发布时间】：2022-01-03 22:03:48
【问题描述】：

在使用 html2canvas 转换 png 时，我将在画布上绘制该图像。我在 html 中使用了多种字体。但是在转换字体时不适用。所以它看起来不同的字体

  function getCanvas() {
       form.width(myPageSize).css('max-width', 'none');
       return html2canvas(form, {
           useCORS: true,
           imageTimeout: 2000,
           removeContainer: true
       });
   }

【问题讨论】：

您好！将您的代码与您的问题一起显示总是一个好主意，这样我们就可以准确地看到发生了什么。或者，您也可以随时链接 jsfiddle！谢谢。
请检查上面的代码形式是元素我直接使用Arial字体而不是使用css嵌入

标签： javascript html css html2canvas

【解决方案1】：

实际上的问题是在 html 中使用了多种字体，因此在转换图像时字体会失败。现在它得到了修复，现在只使用单一字体

【讨论】：

【解决方案2】：

html2canvas(element, {
   onrendered: function (canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = true;
        ctx.mozImageSmoothingEnabled = true;
        ctx.imageSmoothingEnabled = true;
        var img = canvas.toDataURL('image/png');
        console.log(img);
   }
})

我已经为我的项目尝试了上面的代码，在这个代码中，“元素”是您要为其生成图像的 html 元素。

【讨论】：

【解决方案3】：

此问题已在此处解决“https://stackoverflow.com/a/51699805/15756648”，或者您在此处查看工作代码“”。实际上你应该在 svg 标签之后包含字体样式，然后转换 src:url(font to base64 encode) 将字体转换为 base64。检查上面的链接。它对我有用。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。