微信小程序图片转base64后进行压缩

### 微信小程序中将图片转换为 Base64 编码并压缩的实现 在微信小程序开发过程中，如果需要将图片先转换为 Base64 格式再进行压缩处理，可以按照以下方式实现。 #### 方法概述 1. 使用 `wx.chooseImage` 或其他 API 获取图片的临时路径。 2. 利用 `wx.getFileSystemManager().readFile()` 将图片读取为 Base64 字符串[^1]。 3. 对于图片压缩需求，可以通过绘制 Canvas 的方式进行自定义压缩[^3]。 以下是完整的代码示例： ```javascript // 选择图片并将其转化为Base64格式 function chooseAndConvertToBase64() { wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success(res) { const tempFilePath = res.tempFilePaths[0]; // 将图片转成Base64字符串 wx.getFileSystemManager().readFile({ filePath: tempFilePath, encoding: 'base64', success(result) { const base64String = result.data; // 输出Base64编码 console.log('Base64:', 'data:image/png;base64,' + base64String); // 进一步调用压缩逻辑 compressImage(base64String, tempFilePath); }, fail(err) { console.error('Failed to read file as Base64:', err); } }); }, fail(err) { console.error('Failed to select image:', err); } }); } // 压缩图片功能 function compressImage(base64Data, tempFilePath) { const ctx = wx.createCanvasContext('compressCanvas'); // 加载原始图片到Canvas wx.getImageInfo({ src: tempFilePath, success(imageInfo) { const { width, height } = imageInfo; // 设置目标尺寸（可以根据实际需求调整） const targetWidth = Math.min(width, 800); // 最大宽度设为800px const targetHeight = (height / width) * targetWidth; // 绘制缩小后的图像至Canvas ctx.drawImage(tempFilePath, 0, 0, targetWidth, targetHeight); // 导出Canvas中的内容为新的图片文件 wx.canvasToTempFilePath({ canvasId: 'compressCanvas', destWidth: targetWidth, destHeight: targetHeight, fileType: 'jpg', quality: 0.7, // 图片质量设置为70% success(compressedRes) { console.log('Compressed Image Path:', compressedRes.tempFilePath); // 如果需要再次获取Base64编码，则重复 readFile 流程 wx.getFileSystemManager().readFile({ filePath: compressedRes.tempFilePath, encoding: 'base64', success(result) { const compressedBase64 = result.data; console.log('Compressed Base64:', 'data:image/jpeg;base64,' + compressedBase64); } }); }, fail(err) { console.error('Compression failed:', err); } }); } }); } ``` #### 关键点解析 1. **图片选择与 Base64 转换** 使用 `wx.chooseImage` 和 `wx.getFileSystemManager().readFile()` 可以轻松完成图片的选择以及 Base64 编码的转化过程[^2]。 2. **图片压缩** 针对不同设备类型的兼容性问题，推荐采用 Canvas 方式手动控制图片大小和分辨率。通过 `ctx.drawImage` 函数重新绘制图片，并利用 `wx.canvasToTempFilePath` 导出压缩后的图片文件。 3. **性能优化建议** - 控制图片的最大宽高比例，避免内存占用过高。 - 在 Android 设备上优先尝试使用微信内置的压缩工具链。 --- ###