當放在<img>數據URI或<canvas>

Question

放置在SVG文件中的字體字體在SVG和畫布（html5）中檢查使用。我已經在urldata中翻譯了一個svg文件。我得到了這樣的結果：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjYxMiIgaGVpZ2h0PSIzOTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBpbXBvcnQgdXJsKGh0dHA6Ly8xMjcuMC4wLjE6ODAwMC9WZWdhRWRpdG9yL3N0YXRpYy9Nb2RlbGVQb2wvRGVzeXJlbC5jc3MpPC9zdHlsZT4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU+CiAgPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMi42NDI4NiwgMCwgMCwgMi41MzMzMywgLTQ2MC41MiwgLTIxNi45NjcpIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMCIgeD0iMjc2Ljg1ODExIiB5PSIxNTQuNjA1MjYiIGlkPSJzdmdfMiIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkRlc3lyZWwiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPmhlbGxvPC90ZXh0PgogPC9nPjwvc3ZnPg== 

當我複製和地址brosser粘貼所有（火狐，Chrome不相上下的例子）我可以顯示「你好」使用Desyrel字體的字（如果你試過，你贏了不顯示Desyrel字體）。在另一方面，我曾嘗試使用使用此代碼相同urldata丹斯樂畫布（HTML5）：

............. 
         var imageObj = new Image(); 

       imageObj.onload = function() { 

        context.drawImage(imageObj, 0, 0); 

       }; 
........... 
     imageObj.src=urldata; 

在畫布（HTML5）我還可以顯示「你好」，但字體Desyrel丟失。我嘗試了其他字體，結果是一樣的。

有誰知道如何在HTML5畫布中顯示所需的字體？我也試過 imageObj.src = myfile.svg;並且字體不再考慮在內。我認爲html5畫布可以顯示svg圖像，但是字體有問題嗎？ Thansk爲你的答案，任何解決方案？

Answer 1

爲防止隱私泄漏，圖片必須是自包含的。您的base64編碼圖像包含此：

<style type="text/css">@import url(http://127.0.0.1:8000/VegaEditor/static/ModelePol/Desyrel.css)</style> 

，因爲它試圖將圖像文件之外的數據這將無法正常工作。您必須對url文件進行url或base64編碼，並將其作爲數據url嵌入到圖片中，就像您對圖片本身所做的一樣。

一旦全部的圖像數據是在它應該工作的一個文件。