当前位置：首页 > news >正文

vue2将png格式图片转为bmp格式并导入喷码枪中使用

news 2026/6/28 13:58:40

vue2将png格式图片转为bmp格式并导入喷码枪中使用

技术要点
1.格式转换: 将PNG格式转换为BMP格式，提高与喷码枪的兼容性
2.二进制处理: 使用DataView和ArrayBuffer直接操作二进制数据构建BMP文件
3.内存管理: 正确释放创建的对象URL避免内存泄漏
4.错误处理: 包含完整的错误处理机制
这样的实现能够生成标准的BMP格式文件，解决了喷码枪无法识别文件的问题。

// 导出操作 - 修改为下载BMP格式图片handleExportPrint(){letbarcodeParams={bussinessId:this.parentData.proWorkorderDetailId,bussinessCode:this.parentData.prodSeriaNo,barcodeType:"PSN2D",};getBarcodeUrl(barcodeParams).then((response)=>{if(response.data!=null){constbarcodeUrl=response.data.barcodeUrl;constbarcodeContent=response.data.barcodeContent;// 获取条码内容用于文件命名if(barcodeUrl){// 使用修改后的函数this.pngToBmpCanvas(barcodeUrl,barcodeContent);}else{this.$message.error("暂没有生成条喷码");}}});},/** * 使用Canvas将PNG转换为BMP格式并触发下载 * @param {string} pngUrl - PNG图片URL * @param {string} filename - 文件名 */pngToBmpCanvas(pngUrl,filename){constimg=newImage();img.crossOrigin="anonymous";img.src=pngUrl;img.onload=()=>{constcanvas=document.createElement("canvas");constctx=canvas.getContext("2d");canvas.width=img.width;canvas.height=img.height;// 绘制图像到canvasctx.drawImage(img,0,0);// 获取图像数据constimageData=ctx.getImageData(0,0,canvas.width,canvas.height);// 创建BMP数据constbmpData=this.createBMPData(imageData,false);constblob=newBlob([bmpData],{type:"image/bmp"});// 创建下载链接并触发下载consturl=window.URL.createObjectURL(blob);constlink=document.createElement("a");link.href=url;link.download=`${filename||"barcode"}.bmp`;// 触发下载document.body.appendChild(link);link.click();// 清理document.body.removeChild(link);window.URL.revokeObjectURL(url);};img.onerror=(error)=>{console.error("图片加载失败:",error);this.$message.error("图片加载失败");};},/** * 创建BMP文件数据 * @param {ImageData} imageData - Canvas图像数据 * @param {boolean} withAlpha - 是否包含Alpha通道 * @returns {ArrayBuffer} BMP文件数据 */createBMPData(imageData,withAlpha=false){constwidth=imageData.width;constheight=imageData.height;constdata=imageData.data;// 计算每行字节数（必须是4的倍数）constbytesPerPixel=withAlpha?4:3;constrowSize=Math.ceil((width*bytesPerPixel)/4)*4;constpixelArraySize=rowSize*height;// BMP文件头（14字节）constfileHeaderSize=14;constinfoHeaderSize=40;constfileSize=fileHeaderSize+infoHeaderSize+pixelArraySize;constbuffer=newArrayBuffer(fileSize);constview=newDataView(buffer);letoffset=0;// 文件头view.setUint8(offset++,0x42);// 'B'view.setUint8(offset++,0x4d);// 'M'view.setUint32(offset,fileSize,true);offset+=4;// 文件大小view.setUint32(offset,0,true);offset+=4;// 保留字段view.setUint32(offset,fileHeaderSize+infoHeaderSize,true);offset+=4;// 像素数据偏移// 信息头view.setUint32(offset,infoHeaderSize,true);offset+=4;// 信息头大小view.setInt32(offset,width,true);offset+=4;// 宽度view.setInt32(offset,height,true);offset+=4;// 高度view.setUint16(offset,1,true);offset+=2;// 颜色平面数view.setUint16(offset,withAlpha?32:24,true);offset+=2;// 每像素位数view.setUint32(offset,0,true);offset+=4;// 压缩方式（0=不压缩）view.setUint32(offset,pixelArraySize,true);offset+=4;// 图像数据大小view.setInt32(offset,2835,true);offset+=4;// 水平分辨率（像素/米）view.setInt32(offset,2835,true);offset+=4;// 垂直分辨率view.setUint32(offset,0,true);offset+=4;// 使用的颜色数view.setUint32(offset,0,true);offset+=4;// 重要颜色数// 像素数据（BMP是从下到上存储）for(lety=height-1;y>=0;y--){for(letx=0;x<width;x++){constindex=(y*width+x)*4;constr=data[index];constg=data[index+1];constb=data[index+2];consta=data[index+3];if(withAlpha){// BGRA格式（带Alpha）view.setUint8(offset++,b);view.setUint8(offset++,g);view.setUint8(offset++,r);view.setUint8(offset++,a);}else{// BGR格式（无Alpha）view.setUint8(offset++,b);view.setUint8(offset++,g);view.setUint8(offset++,r);}}// 行对齐填充constpadding=rowSize-width*bytesPerPixel;for(leti=0;i<padding;i++){view.setUint8(offset++,0);}}returnbuffer;},