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

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流都适用