Как экспортировать шрифты в svg в png? - PullRequest
Новая
       13

Как экспортировать шрифты в svg в png?

0 голосов
/ 22 мая 2019

Я пытаюсь экспортировать русалка в png. В некоторой степени я был успешным, но я застрял при экспорте шрифтов в svg. Они вызываются просто через класс fa, и обычный экспорт холста не учитывает их при экспорте. В приведенном ниже MWE вы можете увидеть, что в выводе PNG отсутствует значок автомобиля. Пожалуйста, помогите.

Насколько я понимаю, в svg все должно быть встроено, чтобы экспорт холста работал, но я не мог найти способ, как это сделать, потому что в русалку можно вставить любой шрифт, отличный значок, как ему нужно для графиков.

MWE 

function drawInlineSVG(svgElement, ctx, callback)
{
    var svgURL = new XMLSerializer().serializeToString(svgElement);
    console.log(svgElement);
    // console.log(svgURL);
    var img = new Image();
    img.onload = function ()
    {
        ctx.drawImage(this,0,0);
        callback(this);
    }
    // img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
    img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgURL ) );
}

Выход:
enter image description here

Для краткости я включил только функцию экспорта из svg в png. Полный код доступен в Jsfiddle: https://jsfiddle.net/parthi2929/r6wb9ka5/6/

  • Обратите внимание, что автомобиль отсутствует над выводом (часть png). Также обратите внимание на изменение шрифта. Я хочу экспортировать PNG точно так же, как видно из SVG.
  • Можно также заметить, что в jsfiddle я пробовал еще несколько методов, включая использование canvg , rasterizeHTML , но первый даже не отображает никаких шрифтов, в то время как последний дает тот же результат при отсутствии машины ,

Я не мог воспроизвести в собственной области фрагментов SO, поскольку она выдавала ошибку, поэтому прошу прощения за это.

1 Ответ

0 голосов
/ 16 июня 2019

У меня был точно такой же вопрос, и Google взял меня сюда. Я удивлен, что вы не получили ответ раньше. Я нашел сайт faToPng , который предоставляет конвертер (в .PNG, .JPG или base64), который вы можете использовать для этого. К сожалению, он не поддерживает FA4.

В процессе я также наткнулся на этот сайт , который является онлайн-конвертером SVGtoPNG, который помог с некоторыми другими файлами, с которыми я имел дело.

...