前几天遇到个需求，就是将多张图片合成一张，因为以前没有弄过，特地写一份作为记录，方便以后自己回顾，也给别人分享一下自己走的坑。
废话不多说，直接上代码：
代码一
第一步代码解释：
先创建一个canvas对象
然后定义它的宽和高为400像素
绘制一个等宽高的矩形
填充颜色为灰色（#aaa）
绘制完毕，这样我们就创建好了一个canvas
代码二
第二步代码解释：
创建一个图片对象
给图片对象定义出路径
注意：如果图片是从后台返回的，属于跨域，需要加
img.crossOrigin = 'Anonymous';
如果图片是base64的，需要查看字符前头是否包含“data：image/jpeg:base64,”，因为一半后台保存是不包含这个的，但是解析时候需要有这个作为解析参数，然后再添加到src属性中。
在图像加载完毕时候调用canvas实例com的drawImage方法，传入的参数五个，分别代表图像本身、绘制图像左边到实例com左边的距离，绘制图像上边到实例com上边的距离、绘制图像在实例中的宽度、绘制图像在实例中的高度、如果实际图片的宽或者高和提供的不同，会进行压缩处理
这样我们就把第一张图绘制到了画板上
代码三
第二、第三、第四张图分别就是在图片的onload函数里面进行绘制，要不然会出现还没有全部加载完毕就输出的情况，当然，这样写真的好丑，回到地狱呢，可以考虑用es6语法优化一下，后期还会讨论其他几个点，比如：base64格式的输出什么的。
效果图
最后的效果就是这样的，左下角、右上角、右下角都是填充的图像，
今天先到这，谢谢大家观看！
