画布 - 使用destination-atop后保存最终图像

Question

我使用canvas drawImage()两次。一个是背景图像，另一个是某种面具＆＃39;用来从背景中获取想要的图像。

生成的图像是叠加层背后的背景部分。我想保存图像的那一部分。这是我得到绿巨人面孔的一个例子 - 我想从那张脸上创建一个图像并将其保存在我的服务器上。按原样保存此图像（右键单击“保存图像”）将获取画布的完整大小，而不仅仅是所需的面。

http://jsfiddle.net/s248a76w/

HTML看起来像：

<canvas id="canvas" width="900" height="500"></canvas>

JS：

var canvas = document.getElementById("canvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    //Load the images to be blended
    var userPic = new Image;
    userPic.src = "http://img2.wikia.nocookie.net/__cb20090320033607/marvelmovies/images/5/5e/The-hulk-2003.jpg";
    var maskTemplate = new Image;
    maskTemplate.src = "http://www.botaiusti.com/img/1.svg";

    //Set the globalCompositeOperation to lighter
    // ctx.globalCompositeOperation = "lighter";
    ctx.globalCompositeOperation = "destination-atop";

    //Draw the source image
    userPic.onload = function() {
        ctx.drawImage(userPic, 100, 00);
    }


    //Draw the destination image
    maskTemplate.onload = function() {
        ctx.drawImage(maskTemplate, 340, 70);
    }
}