Шрифты, отсутствующие в SVG-файле, помещаются в <img> URI данных или <canvas>

Я проверяю использование шрифтов в SVG и Canvas (html5). Я перевел файл SVG в urldata. Я получил этот результат:

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

Когда я копирую и вставляю в адресный браузер все это (Firefox, пример Chrome), я могу отобразить слово «привет» с помощью шрифта Desyrel (если вы попробуете это, вы не отобразите шрифт Desyrel). С другой стороны, я попытался использовать тот же urldata dans le canvas (html5), используя этот код:

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

                imageObj.onload = function() {

                    context.drawImage(imageObj, 0, 0);

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

В Canvas (html5) я также могу отобразить «привет», но шрифт Desyrel отсутствует. Я пробовал другие шрифты, и результат тот же.

Кто-нибудь знает, как отобразить на холсте html5 требуемый шрифт? Я пробовал также imageObj.src = myfile.svg; И снова шрифт не учитывается. Я думаю, что HTML5 Canvas может отображать изображения SVG, но есть ли проблема со шрифтами? Спасибо за ваш ответ, любое решение?

4 голоса | спросил anraT 14 MarpmThu, 14 Mar 2013 13:07:21 +04002013-03-14T13:07:21+04:0001 2013, 13:07:21

2 ответа


0

Изображение должно быть автономным, чтобы предотвратить утечку информации. Ваше изображение в кодировке base64 содержит это:

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

Это не сработает, так как он пытается получить доступ к данным вне файла изображения. Вам придется кодировать CSS-файл с помощью URL или base64 и встраивать его в изображение как URL-адрес данных, как вы делали это с самим изображением.

Как только все данные для изображения находятся в одном файле, оно должно работать.

ответил Robert Longson 14 MarpmThu, 14 Mar 2013 15:25:15 +04002013-03-14T15:25:15+04:0003 2013, 15:25:15
0

У меня тоже была эта проблема, и я хотел лучше понять ответ Роберта, поэтому я собрал этот 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>
ответил headwinds 18 +03002015-10-18T06:14:41+03:00312015bEurope/MoscowSun, 18 Oct 2015 06:14:41 +0300 2015, 06:14:41

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132