前端合并图片

基于 Canvas 实现的图片合并

// Vue data里的数据
type: "",
sub: 0,
noticeList:[
	{
		name: "图片名字",
		images: [require("@/assets/notice/cdzbz01.png")]
	}
	]

// 图片合并 图片合成一张图
imagesMerge(size) {
    let canvas = document.createElement('canvas')
    canvas.width = size[0].width
    canvas.height = size[0].height * size.length
    let context = canvas.getContext('2d')
    context.rect(0, 0, canvas.width, canvas.height)
    context.fillStyle = '#fff'
    context.fill()

    let height = 0
    size.forEach(item => {
        context.drawImage(item.img, 0, height, item.width, item.height)
        height += item.height
    })
    return canvas.toDataURL('image/png')
},
// 获取图片 以及 图片的实际大小
getImg(imgs) {
	return new Promise(resolve => {
        let arr = []
        imgs.forEach((item, index) => {
            let image = new Image()
            image.src = item
            image.onload = function () {
                arr.push({ id: index, width: image.width, height: image.height, img: image })
                if (arr.length == imgs.length) {
                    arr.sort((a, b) => a.id - b.id)
                    resolve(arr)
                }
            }
        })
    })
}