圖片合成（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)
      })
  }
}