4

我正在检查 SVG 和 Canvas (html5) 中字体的使用。我在 urldata 中翻译了一个 svg 文件。我得到了这个结果：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjYxMiIgaGVpZ2h0PSIzOTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBpbXBvcnQgdXJsKGh0dHA6Ly8xMjcuMC4wLjE6ODAwMC9WZWdhRWRpdG9yL3N0YXRpYy9Nb2RlbGVQb2wvRGVzeXJlbC5jc3MpPC9zdHlsZT4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU+CiAgPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMi42NDI4NiwgMCwgMCwgMi41MzMzMywgLTQ2MC41MiwgLTIxNi45NjcpIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMCIgeD0iMjc2Ljg1ODExIiB5PSIxNTQuNjA1MjYiIGlkPSJzdmdfMiIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkRlc3lyZWwiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPmhlbGxvPC90ZXh0PgogPC9nPjwvc3ZnPg==

当我将所有内容复制并粘贴到地址 brosser 时（Firefox、Chrome 示例），我可以使用 Desyrel 字体显示单词“hello”（如果您尝试过，您将不会显示 Desyrel 字体）。另一方面，我尝试使用以下代码使用相同的 urldata dans le canvas (html5)：

.............
                        var imageObj = new Image();

                imageObj.onload = function() {

                    context.drawImage(imageObj, 0, 0);

                 };
...........
         imageObj.src=urldata;

在画布（html5）中，我也可以显示“你好”，但缺少 Desyrel 字体。我尝试了其他字体，结果是一样的。

有谁知道如何在 html5 画布中显示所需的字体？我也试过 imageObj.src=myfile.svg; 再次没有考虑字体。我认为 html5 画布可以显示 svg 图像，但字体有问题吗？谢谢你的回答，有什么解决办法吗？

4

2 回答 2

3

图像必须是自包含的，以防止隐私泄露。您的 base64 编码图像包含以下内容：

<style type="text/css">@import url(http://127.0.0.1:8000/VegaEditor/static/ModelePol/Desyrel.css)</style>

这不起作用，因为它试图访问图像文件之外的数据。您必须对 css 文件进行 url 或 base64 编码，并将其作为数据 url 嵌入到图像中，就像对图像本身所做的那样。

一旦图像的所有数据都在一个文件中，它应该可以工作。

于 2013-03-14T11:25:15.437 回答
2

我也遇到了这个问题，我想更好地理解罗伯特的回答，所以我把这个jsfiddle放在一起，演示如何用 base64 对字体“Geogrotesque”进行编码并将其嵌入到 svg 中，这样当 svg 被序列化为字符串并设置为作为img的源，它将保持img中的字体，以便它可以在画布中绘制。

<defs>
<style>
@font-face {
font-family: 'geogrotesque_mediummedium';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMg...[place encoded data here];
}
</style>
</defs>
于 2015-10-18T03:14:41.300 回答