字體圖標不能在blob圖像中工作

我在其中包含字體圖標，如下所示。輸出顯示爲正方形而不是圖標。

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版本的font-awesome（只有您使用的字形需要在那裏），要麼將font-awesome的一個字體文件轉換爲dataURI版本（用xhr + FileReader實現），並將此dataURI設置爲字體的URL。

Personnaly，我會去與前者，因爲後者會產生更大的文件大小。

來源

2016-08-06 02:00:35 Kaiido

非常感謝你Kaiido！這真的很有幫助。包含實際的svg後，它就可以工作。 – Aneesh

字體圖標不能在blob圖像中工作

回答

相關問題