javascript - Canvas - 将第一个 Canvas 中生成的图像添加到第二个 Canvas 中

Question

您好，我已经为第一个 Canvas 中的第一个图像创建了一个圆形表单，但我没有成功使用第一个 Canvas 的 dataURL 并将其添加到第二个 Canvas 中。

这是我的 fiddle :http://jsfiddle.net/acbo6m6o/2/

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

ctx.arc(150,150, 130, 0, Math.PI*2,true); // you can use any shape
ctx.clip();

var img = new Image();
img.addEventListener('load', function(e) {
    ctx.drawImage(this, 0, 0, 300, 300);

    img2.src=canvas.toDataURL();

}, true);
img.src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";


img2.src=canvas.toDataURL();

谢谢。

Answer 1

无需获取第一个canvas的dataURL。您可以使用 drawImage() 将第一个 canvas 本身绘制到第二个 canvas 中。方法:

var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img.addEventListener('load', function(e) {
    ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
    ctx.save();
    ctx.clip();
    ctx.drawImage(this, 0, 0, 300, 300);
    ctx.restore();
    ctx2.drawImage(ctx.canvas, 0, 0);
}, true);

#canvas2 {
  background-color: lightgrey;
}

<canvas width="300" height="300" id="canvas"></canvas>
<canvas width="300" height="300" id="canvas2"></canvas>