图片合成（h5）

关于图片合成，我是使用的mcanvas的这个插件，挺好用的，已star，这是地址
个人认为还不错的几点
1. 集成的很好，需要的无论是图片合成，还是文字水印，都有
2. 支持几种图片格式，base64、地址连接、files对象
3. 使用很方便，稍微封装一下，就可以在整个项目中公用，写成一个工具类，挺不错的
下面是代码使用案例
这里因为公司业务，暂时没有用到合成文字水印
因为这个项目时在vue中使用的，所以需要安装一下
npm install mcanvas –save

<template>
    <div>
        <button @click="getData">生成图片</button>
        <img :src="url" alt="">
    </div>
</template>
<script>
import { image} from '../../util/photo.js'
export default {
    data() {
        return {
            url: null,
            // 初始化画布
            photoSize: {
                width: 600,
                height: 600,
                backgroundColor: 'yellow'
            },
            // 底图
            backImg: 'http://img.zcool.cn/community/011a5859ac137ea8012028a92fc78a.jpg@1280w_1l_2o_100sh.jpg',
            background: {
                left: 0,
                top: 0,
                type: 'crop'
            },
            // 单个图传递对象
            objects: {
                image: 'http://img.zcool.cn/community/011a5859ac137ea8012028a92fc78a.jpg@1280w_1l_2o_100sh.jpg',
                options: {
                    width: 183,
                    pos: {
                        x: 0,
                        y: 369,
                        scale: 0.84,
                        rotate: 1
                    }
                }
            },
            // 多个图传递数组
            object: [
                {
                    image: 'http://img.zcool.cn/community/011a5859ac137ea8012028a92fc78a.jpg@1280w_1l_2o_100sh.jpg',
                    options: {
                        width: 183,
                        pos: {
                            x: 0,
                            y: 369,
                            scale: 0.84,
                            rotate: 1
                        }
                    }
                },
                {
                    image: 'http://img.zcool.cn/community/011a5859ac137ea8012028a92fc78a.jpg@1280w_1l_2o_100sh.jpg',
                    options: {
                        width: 183,
                        pos: {
                            x: 0,
                            y: 100,
                            scale: 0.84,
                            rotate: 1
                        }
                    }
                }
            ]
        }
    },
    methods: {
        getData() {
            let that = this
            // 合成多张图片是，传递数组，合成单张图片时，传递对象
            // 这个函数得参数分别代表
            photoSize画布初始大小
            backimg底图
            background底图的位置
            object合成图片的对象（或者数组）
            function回调函数callback主要是取出base64值，这个就是图片
            image(that.photoSize, that.backImg, that.background, that.object, function (data) {
                that.url = data
            })
        }
    }
}
</script>
这里是工具类
import Mc from 'mcanvas'
export const image= (photoSize, backImg, background, object, callback) => {
  let mc = new Mc(photoSize)
  // 在底图上，合成多张
  if (Array.isArray(object)) {
    mc.background(backImg, background).add(object)
      .draw(b64 => {
        callback(b64)
      })
  } else {
    // 在底图上合成单张
    mc.background(backImg, background)
      .add(object.image, object.options)
      .draw(b64 => {
        callback(b64)
      })
  }
}