Javascript 画布--在使用目的地后保存最终图像

我使用画布drawImage两次。一个是背景图像，另一个是用于从背景中获取所需图像的某种“遮罩”

生成的图像是覆盖后面的背景部分。我想保存图像的那部分。这里有一个例子，我得到了绿巨人的脸-我想创建一个形象的脸，并保存在我的服务器上。按原样保存此图像右键单击“将图像另存为”将获取画布的完整大小，而不仅仅是所需的面

HTML看起来像：

JS:

---

我认为你很幸运能先加载背景图像，这可能没有保证。您是否尝试过将画布的大小设置为最终图像的大小，而不是900x500？谢谢-我将覆盖的图像放在了背景的onload回调中。我想我可以在最后动态调整画布的大小。你有什么建议吗？我需要的只是面部图像。调整画布的大小通常会清除其内容，因此先调整画布的大小，然后使用带有多个参数的图像来绘制图像。我应该绘制一个图像笔划吗？在我的例子中，环绕绿巨人的脸，然后将图像中的内容保存下来？我还不知道该怎么做，但如果这是一种方法，我会去做的。不完全是我的意思，首先按照最终图像画布的大小调整画布的大小。宽度=111111；画布高度=111111；，然后往里拉。示例如下：

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);
    }
}