如何捕获背景图像画布和用户上传的图片

Question

所以我有一个html文件，它有一个使用背景图像的画布。但我目前面临的问题是，当用户上传新图片时，它会替换这个背景图像。但我想让它做的是让用户的图片在背景图片后面，这样他们就可以下载它作为一个完整的图像。

脚本使用php和js。但我认为这与CSS和HTML有关。所以你能帮帮我吗:)谢谢!

HTML代码:

  <div class="dropzone" data-download="true" data-width="594" data-height="816" data-url="canvas.php" data-resize="true" style="background-image:url(assets/images/cover_Kaplan.png); background-repeat:no-repeat;">
    <input type="file" name="thumb" />
  </div>

Answer 1

你所能做的就是在画布上下文中使用lighten选项globalCompositeOperation，它将给两个图像合并在一起的效果

是我的jsFiddle: https://jsfiddle.net/khqknwva/

Javascript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img1 = new Image;
img1.src = "http://i.istockimg.com/file_thumbview_approve/58650930/6/stock-photo-58650930-suspicious-cat-portrait.jpg";
var img2 = new Image;
img2.src = "http://i.istockimg.com/file_thumbview_approve/56467866/6/stock-photo-56467866-suspicious-cat-portrait.jpg";
ctx.globalCompositeOperation = "lighten";
ctx.drawImage(img1,0,0);
ctx.drawImage(img2,0,0);

你可能需要点击运行按钮几次，因为我还没有编码的图像。顺便说一句，globalCompositeOperation还有很多其他的选择http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/