关于图片合成,我是使用的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)
})
}
}