HTML5 - 保存画布背景和图像

Question

我正在尝试创建一个允许从画布中裁剪和保存图像的网站。

我当前的代码能够在画布中显示裁剪的图像，但我也试图将画布的背景保存为裁剪图像上方的叠加层。

crop = function(){
    //Find the part of the image that is inside the crop box
    var crop_canvas,
        left = $('.overlay').offset().left - $container.offset().left,
        top =  $('.overlay').offset().top - $container.offset().top,
        width = $('.overlay').width(),
        height = $('.overlay').height();

    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;

    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);

    window.open(crop_canvas.toDataURL("image/png"));

  }

链接到示例图像裁剪代码：http://codepen.io/anon/pen/LGKeQQ

在这种情况下，我尝试将.overlay背景的iPhone图像保存在裁剪后的图像上。

我该怎么做？