canvas合成图片到产品样版上(一)

前言

最近看到很多平台有自己的设计器，可以将图像合成到产品图上，最终出来真是的成品图效果，就稍微研究了一下。

产品图

素材图

最终效果图

原理

合成的原理其实很简单，就是图层的叠加，在canvas图层设置合成选型为 "globalCompositeOperation = destination-atop"

设置之后2个图层叠加的时候，只会合成在手提包透明区域。所以除了透明区域其他区域不显示图像。

假设我们不设置看看会是什么效果；

globalCompositeOperation的具体用法可以参考canvas官方的解释；

代码实现

创建canvas标签

<div><canvas id="canvas" width="800" height="800"></canvas>
</div>

合成函数

  function mergeImages() {// 创建一个画布const canvas = document.getElementById("canvas");const context = canvas.getContext("2d");const template = new Image();// 样版图片template.src = "handbag.png";template.onload = function() {context.drawImage(template, 0, 0,800,800);const overlay = new Image();overlay.src = "girl.png";overlay.onload = function() {context.globalCompositeOperation = "destination-atop";context.translate(-10,50)context.drawImage(overlay, 0, 0, 800, 800);};};}
mergeImages()

当然还有其他方法可以实现，可以将图片素材放在底部，样板图案放在上面一层，这样透明区域的图像就会显示出来，我们只需要把两张图片的src对调一下就可以看到效果。

这里我们可以清晰的看到素材图片在底部，样版图案在顶部，因为手提袋的正面是透明的，所以下面的图就会展示出来给人是合成的视觉效果。其他区域由于不是透明图所以遮住了素材图。如果是这种做法的话，用DIV也可以实现一样的效果。

DIV代码实现

HTML

   <div class="container"><img src="girl.png" alt=""><img src="template.png" alt=""></div>

CSS

.container{width: 800px;height: 800px;position: relative;
}
.container img{position: absolute;left: 0;top: 0;width: 100%;
}
.container img:first-child{transform: scale(0.7);left: -20px;top: 50px;
}

效果

总结

我们可以看到用DIV实现简单的两张图叠加合成更简单，而且更容易调试图片的大小以及位置，但是如果碰到手提袋的侧面也要贴图呢？下一章会教大家如何给多个区域贴图。