header ads

【adobe fonts を blob化したい】SVG textをcanvasで画像(png)変換すると、font-familyが無視される

12月 01, 2022

前提

SVGをcanvasを使用して画像に変換していますが、
以下の時、<text ...> の font-family が画像に反映されません。

  • svg の中で <text ...> を使用している
  • font-family は、adobe font である
  • 日本語フォント (ex. kozuka-mincho-pro)
  • adobe font は、Web プロジェクトページ で生成される script タグを使用して埋め込み

※他の自作フォントは、blob化することで、画像にもfont-familyが反映できています。
※ブラウザ上（SVGの時点）では、adobe font の font-family も反映されています。

何か知見ありましたら、アドバイスいただけると幸いです。
よろしくお願いいたします。

実現したいこと

最終的に、

  • canvasで生成した画像で、<text ...>の font-familyが適用されていること
  • 例えば、kozuka-mincho-pro

↓

  • blob化したら解決しそうなので、adobe fonts を blob化したい

発生している問題・エラーメッセージ

SVGをcanvasで画像（png）に変換したときに、
font-familyが適用されず、デフォルト?のフォントスタイルになってしまう。

該当のソースコード

classに、.sample を指定しています。

svg

<svg ...> ... <text font-size="12" x="0" y="0" class="sample" fill="#ffffff" rorate="0" text-anchor="middle" dominant-baseline="central" > サンプルテキスト </text></svg>

試したこと

１） blob化
canvasでfont-familyを適用するには、blobにする必要があるとの、記事を見ましたので
試してみました。（adobe以外のサーバーにある自作フォントは、これで解決済）

※xxxxxxx.js は 仮です。 実際は、adobeのkitIdが入ります。

js

const svg = document.getElementById("svg_sample") const style = svg.getElementsByTagName("style")[0] const json = await axios.get(https://use.typekit.net/xxxxxxx.js, { responseType: 'blob' }) const data = json.data const blob = new Blob([data], {type: "font/woff;charset=utf-8"}) let reader = new FileReader() reader.readAsDataURL(blob) reader.onload = () => { const dataURL = reader.result const font_face_css = `@font-face { font-family: sample; src: url("${dataURL}"); }` const font_class = `.sample { font-family: sample; }` const add_html = `${font_face_css} ${font_class}` style.insertAdjacentHTML('beforeEnd', add_html); }

画像どころか、ブラウザ上でもfont-familyが反映されません。

２）text に 直接 font-family 指定

js

const svg = document.getElementById("svg_sample")const textEls = svg.getElementsByClassName(`sample`)const targetTextEl = textEls[0]targetTextEl.setAttribute("font-family", "kozuka-mincho-pro")

↓

svg

<text font-size="12" x="0" y="0" class="sample" fill="#ffffff" rorate="0" text-anchor="middle" dominant-baseline="central" font-family="kozuka-mincho-pro" // ここが追加されます > サンプルテキスト </text>

blobにしてないので、canvas処理ではfont-familyが反映されない？

補足情報（FW/ツールのバージョンなど）

Vue 3.0
SVGを画像にする方法はこちらを参考にしています（成功しています）
: https://blog.asial.co.jp/1615

hsmw

hsmw

コメントを投稿

0 コメント