html使用canvas合并多张图片并下载

html使用canvas合并多张图片并下载

1. 创建canvas对象，并引入2d上下文实例

const canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d');
canvas.width = 1920 // 设定canvas的宽度、高度
canvas.height = 1080

2. 创建图片对象

let img1 = new Image();
img1.src = require('../../assets/img/monitor/map-name.png');
// 监听onload 事件，待图片加载完毕后绘制到canvas上
// 计数器，用来计数是否全部加载完成
let num = 0
img1.onload = function() {
	ctx.drawImage(img1, 10, 10);
	// 假设img1是必须先加入，则其他图片在其onload函数上加载并绘制到canvas
	let img2 = new Image();
    img2.src = require('../../assets/img/monitor/map-name.png');
    let img3 = new Image();
    img3.src = require('../../assets/img/monitor/boundary.png');
    // 分别监听img2和img3的onload事件
    img1.onload = function() {
	   ctx.drawImage(img1, 10, 10);
	    num++
	    if (num === 2) { // 判断是否是最后一张，是最后一张则下载图片
	    	// 将canvas转化成URL链接，用a标签进行下载或者预览，img标签预览都可以
	        href = canvas.toDataURL();
	        const downloadElement = document.createElement('a')
	        downloadElement.href = href
	        downloadElement.target = '_blank'
	        downloadElement.download = `${name}.png`
	        document.body.appendChild(downloadElement)
	        downloadElement.click()
	        document.body.removeChild(downloadElement)
	    }
	}
	img3.onload = function() {
	    ctx.drawImage(img3, 10, 10);
	    num++
	    if (num === 2) {
	        href = canvas.toDataURL();
	        const downloadElement = document.createElement('a')
	        downloadElement.href = href
	        downloadElement.target = '_blank'
	        downloadElement.download = `${name}.png`
	        document.body.appendChild(downloadElement)
	        downloadElement.click()
	        document.body.removeChild(downloadElement)
	    }
	}
})

注：思路就是将图片按照你想要的顺序添加到canvas的指定位置，然后待全部加载完成后采用a标签下载下来，本地链接，外部链接，blob流都适用