html使用canvas合并多张图片并下载html使用canvas合并多张图片并下载1.创建一个canvas对象，引入一个2d上下文实例constcanvas=document.createElement('canvas')letctx=canvas.getContext('2d');canvas.width=1920//设置画布的宽高canvas.height=10802创建一个图像对象letimg1=newImage();img1.src=require('../../assets/img/monitor/map-name.png');//监听onload事件，图片加载完成后绘制在画布上//计数器，用于统计是否全部加载完成letnum=0img1.onload=function(){ctx.drawImage(img1,10,10);//假设必须首先添加img1，其他图像将在其onload函数上加载并绘制到画布上letimg2=newImage();img2.src=require('../../assets/img/monitor/map-name.png');让img3=新图像（）；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();常量downloadElement=document.createElement('a')downloadElement.href=hrefdownloadElement.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();constdownloadElement=document.createElement('a')downloadElement.href=hrefdownloadElement.target='_blank'downloadElement.download=`${name}.png`document.body.appendChild(downloadElement)downloadElement.click()文档。body.removeChild(downloadElement)}}})按照你想要的顺序添加到画布的指定位置，全部加载完成后使用a标签进行下载。本地链接、外部链接、blob流都适用
