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 = 0img1.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流都实用