如何将DOM中的图片绘制到canvas上？

Question

一个新手因为知识面太窄导致读不懂文档。

在MDN上有关canvas有这么一章《将 DOM 对象绘制到 canvas 中》
其中对插入图片有一段这样的描述：

SVG 图像不允许加载任何外部资源，即使看上去来自同一个域。资源如栅格化图像（如 JPEG 图像）或 <iframe> 需要用 data: URIs 来内联引入。

有关插入图片的介绍就这么一段，但是我看不懂

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;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

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

img.src = url;

文章中有这么一段demo，效果也不错，但是没有引入图片，我尝试用标签，没有什么效果

<img src=""></img>

想问问如何解决这个问题？我想把图片通过这种方式绘制到canvas上

Answer 1

不太明白你想表达什么。这段代码是把SVG转成Blob，然后把img的src指向这个blob，那么img就会展现这个svg的样式。然后通过canvas把img画到画布上

Answer 2

var ctx = c1.getContext('2d');  //c1为Canvas画布id
var img = new Image();
  img.src = 'x.png';
  img.onload = function(){  //必须等待图片加载完成
    //img.width   img.height
ctx.drawImage( img, x, y );
    ctx.drawImage( img, x, y, w, h ); //绘制图像进行拉伸
}