質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1831閲覧

svg要素をpngに変換する際に、webフォントが適用されない。

morisei

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

2クリップ

投稿2018/02/07 07:41

前提・実現したいこと

テキストが含まれるSVG要素で作成した画像をPNGに変換する際に、テキストのフォントをWebフォントで適用させたものにしたいのですが、PNGに変換する時にWebフォントが無視され、デフォルトフォントが適用されてしまいます。SVG要素をそのままHTMLで表示する場合は、Webフォントは問題なく適用されるのですが、pngに変換すると指定したフォントは適用されない画像になってしまいます。
Webフォントの適用の仕方を含めたやり方がよくのか、そもそもPNGへ変換する際にWebフォントは適用出来ないのか、何かご存知の方がおりましたら、助言して頂きたく宜しくお願い致します。

<SVGからPNGに変換する際に参考にしたサイト>
https://qiita.com/jkawamoto/items/792359460aa1c364ee90

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

エラーメッセージ

該当のソースコード

HTML

1// SVG要素 2<svg id="svg_sample" xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="110"> 3 4 <style> 5 @font-face { 6 font-family: 'Sawarabi Mincho'; 7 src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot); 8 src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot?#iefix) format('embedded-opentype'), 9 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff2) format('woff2'), 10 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff) format('woff'), 11 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.ttf) format('truetype'); 12 } 13 </style> 14 15 <text x="55" y="55" id="sample" text-anchor="middle" style="fill: red; font-weight: bold; font-size: 16px; font-family: Sawarabi Mincho;">さんぷる</text> 16 <rect x="5" y="5" width="100" height="100" rx="15" ry="15" fill="transparent" stroke="red" stroke-width="2" id="kaku"/> 17</svg> 18 19 20 21<script type="text/javascript"> 22 23・・・・・・・・・・・・ 24 25    // SVGをPNGに変換して、CANVASへ設定 26 function createSVG(){ 27 var svg = document.querySelector("svg"); 28 29 var svgData = new XMLSerializer().serializeToString(svg); 30 var canvas = document.getElementById("base"); 31 32 // 出力サイズ 33 canvas.width = 360; 34 canvas.height = 360; 35 canvas.style.marginTop = ""; // 位置 36 37 var ctx = canvas.getContext("2d"); 38 ctx.beginPath(); 39 40 clipObject(styleCipher,ctx); 41 42 var image = new Image(); 43 image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData))); 44 45 // canvasに画像イメージが生成された時 46 image.onload = function(){ 47 ctx.drawImage(image, 0, 0); 48 canvas.toDataURL(); 49 image.src = "data:image/png;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(canvas))); 50 51 var a = canvas.toDataURL(); 52 imageCreate = spritImgUrl(a); 53 54 var testimg = document.getElementById("testimg"); 55 testimg.setAttribute("src",a); 56 57 } 58 59 } 60 61・・・・・・・・・・・・ 62 63</script> 64

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

yooonb👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2018/02/07 08:09

createSVG関数はどのタイミングで発火されてますか?$(fn)の中の場合、DOMツリー構造が構築された瞬間処理が実行しますので、重いWebフォントのDLが完了する前にcanvasへの出力が始まっている可能性があります。
morisei

2018/02/07 10:40

ご回答ありがとうございます。createSVG関数は、テキスト情報を入力させた後のボタン押下時に呼ぶ形でして、確かにそのタイムラグの懸念はありそうですね。
guest

回答1

0

ベストアンサー

WEBフォントを含んだSVGをcanvas要素に転写する場合は, CSSが参照しているフォントファイル(woff等)をdataURIスキーム形式に変換し, SVG内にstyle要素として埋め込む必要があります.

NOTE:
SVGをImage(HTMLImageElement)オブジェクトで読み込む場合, 外部リソース(CSS等)を参照することが出来ません.

つまり,

HTML

1<!--SVG--> 2<style> 3 @font-face { 4 font-family: 'Sawarabi Mincho'; 5 src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot); 6 src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot?#iefix) format('embedded-opentype'), 7 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff2) format('woff2'), 8 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff) format('woff'), 9 url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.ttf) format('truetype'); 10 } 11 </style>

の, urlで参照しているフォントファイル(woff2等)部をAjaxでBlobオブジェクトとして取得し, それをFileReaderオブジェクトでdataURLスキームで文字列化したもので置き換えます.


GoogleFontでの例
http://jsdo.it/defghi1977/K53D

投稿2018/02/07 08:24

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

morisei

2018/02/07 10:42

大変、参考になるご回答ありがとうございます。こちらを参考に試してみたいと思います。
morisei

2018/02/08 11:26

こちら、フォントファイルをdataURLスキームで文字列化したもので試すと適用する事が出来ました。ありがとうございました。 ただ、フォントファイルを丸ごと文字列化するので、日本語のWebフォントでやろうとするとサイズが大きくなり、その辺りで課題として残しましたが、当面はこれで進めようかと思います。
defghi1977

2018/02/08 12:03

SVG構造に手を入れてよいのであれば, canvas要素に日本語文字列を描画したものをSVGにimage要素として埋め込み, そのSVGを再度canvas要素に転写する方法もあります.(が, パフォーマンスについては未知数です) 何れにせよ日本語WEBフォントはグリフの収録範囲を狭めないと厳しいかもしれません.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問