JS实现多张图片合成一张效果

前文中提到，通过PHP合成图片，最后虽然成功了，但相对比较复杂，生成的效果和实际使用过程中也差强人意，但通过JS很快就找到了一个合适的插件，通过部分优化，实现的结果也很让人惊喜

首先，本方法是通过html2canvas插件实现的生成图片效果。

图片需要自适应宽度，直接用div块包起来最后生成的图片会有白块。

#hero_capture{max-width: 1000px; width: auto;float: left;}
#hero_capture img{width: 100px; height: 70px; float: left;}

将图片输出到页面上

<div id="hero_capture">
     <img src="/static/img/01.jpg">
     <img src="/static/img/02.jpg">
     <img src="/static/img/03.jpg">
    <div style="clear: both;"></div> 
</div>
<div style="clear: both;"></div>

引入js文件

<script crossorigin="anonymous" src="https://lib.baomitu.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

将多张图片生成一张图片，图片div块隐藏

html2canvas(document.querySelector("#hero_capture")).then(canvas => {
   $("#hero_capture").css({
       "display": 'none'
   });
   $("#img_hero").append(canvas)
});