blobイメージでフォントアイコンが機能しない

これは、キャンバスとBlobを使用してイメージを作成することに関するものです。blobイメージでフォントアイコンが機能しない

font-iconを以下のように含めています。出力はアイコンの代わりに四角で表示されます。

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
 
    '<text x="0" y="70" font-family="FontAwesome" font-size="70px">\uf040</text>' + 
 
    '</svg>'; 
 

 
var DOMURL = window.URL || window.webkitURL || window; 
 

 
var img = new Image(); 
 
var svg = new Blob([data], { 
 
    type: 'image/svg+xml;charset=utf-8' 
 
}); 
 
var url = DOMURL.createObjectURL(svg); 
 

 
img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    DOMURL.revokeObjectURL(url); 
 
} 
 

 
img.src = url;

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 

 
    <H3>SVG:</H3> 
 
    <svg width="100" height="100"> 
 
    <text x="0" y="70" font-family="FontAwesome" font-size="70px">&#xf040</text> 
 
    </svg> 
 

 
    <H3>Blob:</H3> 
 
    <canvas id="canvas"></canvas> 
 
</body> 
 

 
</html>

私は何かが足りないのですか？誰か助けてくれますか？

出典

2016-08-05 Aneesh

以下のように私はそれでフォントのアイコンを含めています実際にあなたがそれを指している、それを含めていません。
残念ながら、セキュリティ上の理由から、HTMLImagesコンテンツは自己依存型でなければならず、外部リソースを呼び出すことはできません。

これは、BLOBを作成する前に、実際にSVGに組み込む必要があることを意味します。

これを行うには、svgドキュメントのsvgバージョンを直接svgドキュメントにコピーするか（使用しているグリフのみが必要です）、font-awesomeのフォントファイルの1つをdataURIバージョンに変換しますxhr + FileReaderで達成可能）、このdataURIをフォントのURLとして設定します。

Personnaly、私は後者がより大きなファイルサイズを生成するので、私は前者に行くでしょう。

出典

2016-08-06 02:00:35 Kaiido

大変ありがとうございます！これは本当に役に立ちました。実際のsvgを含めた後、それは動作します。 – Aneesh

blobイメージでフォントアイコンが機能しない

答えて

関連する問題