步骤一，多张图片上传

<input type="file" id="imageInput" multiple accept="image/*" @change="handleFileUpload" />
<!-- 图片绘制合并区域 -->
<div class="canvasPDF"><canvasid="myCanvas":style="{ width: wcanvansimg + 'px', height: hcanvansimg + 'px', border: '1px solid #eeeeee' }"></canvas>
</div>

handleFileUpload(event) {this.imageslist = event.target.files;console.log('初始文件内容格式',this.imageslist[0])
},

步骤二，循环获取所有绘制图片的总高度

//获取所有图片的总高度getImginfo() {return new Promise((resolve, reject) => {let allHeight = 0;let loadedCount = 0; // 用于追踪已加载图片数量let totalImages = this.imageslist.length; // 图片总数for (let i = 0; i < totalImages; i++) {//图片转化方式const reader = new FileReader();reader.readAsDataURL(this.imageslist[i]);reader.onload = (e) => {const img = new Image();img.onload = () => {console.log('经过转化的图片文件',e);console.log('可以获取图片宽高的图片格式',img);allHeight += img.height;loadedCount++; // 增加已加载图片计数if (loadedCount === totalImages) {resolve(allHeight);}};img.onerror = (error) => {reject(error);};//将经过转化的图片文件赋值给srcimg.src = e.target.result;};}});},

new FileReader()方法作用

• 通过创建一个FileReader实例，你可以使用它的方法来异步读取文件内容。
• readAsDataURL方法就是FileReader提供的一种读取方式，它将文件读取为数据URL，
• 这是一种以Base64编码的字符串，可以直接在HTML中作为图像源使用

const file = event.target.files[0]; // 获取选中的文件if (file) {const reader = new FileReader();// 当文件读取完成后，reader.onload事件将被触发reader.onload = function(e) {// e.target.result包含了文件的数据URL，也就是base64console.log(e.target.result);// 这里可以将数据URL设置为<img>标签的src属性，显示图片};// 开始读取文件reader.readAsDataURL(file);}

new Image()方法作用介绍

• 这里的img，就可以获取img的宽高
• img也可以绘制在画布上

// 创建一个新的Image对象
const img = new Image();// 设置onload事件处理函数，当图片加载完成后执行
img.onload = () => {// 在这里编写当图片加载完成后想要执行的代码console.log('图片加载完成！');//img
};// 设置图片的source属性，开始加载图片
img.src = 'path/to/your/image.jpg';

步骤三，合并多张图片

 async mergeImg() {let that = this;var canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');let x = 0;let y = 0;//获取图片信息const res = await that.getImginfo();//展示高度that.hcanvans = res;that.wcanvans = 2400;canvas.width = that.wcanvans * that.dpr;canvas.height = res * that.dpr;for (let i = 0; i < that.imageslist.length; i++) {const reader = new FileReader();reader.readAsDataURL(this.imageslist[i]);reader.onload = (e) => {const img = new Image();img.src = e.target.result;img.onload = () => {ctx.drawImage(img, x, y, img.width, img.height);y += img.height;if (i === that.imageslist.length - 1) {// 下载图片that.downloadImage(canvas.toDataURL(),`合并图片.png`)}};};}ctx.scale(this.dpr, this.dpr);},

canvas.toDataURL()作用-

• 获取画布图片的base64格式

dpr作用

• 获取设备像素比

  created() {this.dpr = window.devicePixelRatio;},

步骤四，下载图片

//参数1为base64格式图片文件，参数2是下载后的图片文件名downloadImage(base64str, filename) {const link = document.createElement('a');link.href = 'data:' + 'image/png';link.href += base64str;link.download = filename + '.png';document.body.appendChild(link);link.click();document.body.removeChild(link);},