原生SVG到Canvas或SVG到圖像的轉換

Question

我讀到這篇文章： 有沒有一種方法可以將SVG文件轉換為HTML5的canvas兼容命令？ 並嘗試谷歌。

有本地（跨瀏覽器）方式嗎？ SVG文檔在瀏覽器將其呈現在屏幕上之后以像素形式顯示在屏幕上，將這些像素作為圖像提供給用戶將是最簡單的任務。

Answer 1

Paperjs是一個很好的圍繞畫布的小包裝器庫，它具有SVG導入功能 。

Answer 2

現在這是本地的。


從MDN，

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

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

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

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

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

img.src = url;

只需將svg字符串替換為您自己的svg。


PS。 與在普通DOM上進行渲染相比，在畫布上進行渲染似乎可以使性能更好！ 用於渲染到畫布的性能似乎始終比普通dom （在Chrome，Safari和移動Chrome上測試）的性能 快約50倍 。