Javascript 本机SVG到画布或SVG到图像的转换

我读了这篇文章：并尝试了谷歌

---

是否有本机（跨浏览器）方式？SVG文档在浏览器在屏幕上渲染后以像素的形式显示在屏幕上，将这些像素作为图像提供给用户是最简单的任务。

Paperjs是一个围绕画布的漂亮的小包装库，它有一个

来自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;

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var数据=“”+
'' +
'' +
“我喜欢”+
'' +
“奶酪”+
'' +
'' +
'';
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=newblob（[data]，{type:'image/svg+xml'}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url；

只需将svg字符串替换为您自己的svg即可。


另外，在画布上渲染的性能似乎比在普通DOM上渲染的性能要好得多！似乎始终比（在Chrome、Safari和mobile Chrome上测试）快50倍左右