iOS相机图片处理：上传压缩转Base64至阿里云，自动旋转矫正

在移动端Vue应用中，实现图片上传功能时，涉及到对H5图片处理、压缩和转换为Base64格式，并且特别针对iOS设备上的相机拍照时可能存在的旋转角度问题。以下步骤详细介绍了如何完成这一任务： 1. 引入`exif-js`库：首先，为了处理图片的Exif信息，包括旋转角度，我们需要引入这个JavaScript库，以便获取和纠正图片的正确方向。 ```javascript import EXIF from 'exif-js'; ``` 2. 文件上传处理函数：创建一个名为`dynamic_imgChange`的方法，当用户选择图片时调用。函数检查文件数量、大小和类型，确保符合要求： - 检查文件长度限制：不超过9张图片。 - 检查文件大小：小于10MB。 - 检查文件扩展名：仅允许.jpg, .png, 或 .jpeg格式。 3. 使用FileReader读取图片并转换为Base64：当文件上传后，通过`FileReader`读取图片内容，并在`onload`事件中将图片转为Base64格式。 ```javascript reader.readAsDataURL(file); reader.onload = function() { let imgData = this.result; // 图片的Base64字符串 ... } ``` 4. 处理图片旋转：利用`EXIF.getData`方法获取图片的Exif数据，特别是`Orientation`属性，判断是否需要旋转90度。如果是90度或其逆序，使用`canvas`来调整图片方向： ```javascript let orient = EXIF.getTag(this, 'Orientation'); if (orient === 6) { // iOS相机拍照默认为横屏，所以可能出现90度旋转 img.onload = function() { // 假设需要旋转90度，代码调整图像尺寸和方向 canvas.width = img.height; canvas.height = img.width; ctx.translate(canvas.width, 0); ctx.rotate(Math.PI / 2); ctx.drawImage(img, 0, 0); // 继续处理Base64编码后的图片 }; } ``` 5. 压缩图片：在`canvas`上绘制图片后，可以进一步使用Canvas API进行压缩，以适应阿里云的上传要求。这可能涉及调整图像质量或尺寸，具体方法取决于实际需求和阿里云的API文档。 6. 最后，上传Base64编码的图片到阿里云：处理完所有预处理步骤后，使用Base64字符串作为参数，上传到阿里云服务器。注意，具体的上传接口和参数设置需要根据阿里云官方文档来实现。 总结，这个过程包含了前端处理用户上传的图片，包括文件检查、Base64转换、图片旋转校正和可能的压缩，以适应特定的上传要求。在iOS设备上，由于相机拍摄图片可能会有旋转，开发者需要额外处理这部分逻辑。在整个流程中，关键点在于正确地读取、处理和转换图片数据，以确保最终上传成功。