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

前言

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

1. 产品图

2. 素材图

3. 最终效果图

原理

合成的原理其实很简单，就是图层的叠加，在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实现简单的两张图叠加合成更简单，而且更容易调试图片的大小以及位置，但是如果碰到手提袋的侧面也要贴图呢？下一章会教大家如何给多个区域贴图。