Vue.js结合Exif处理图片旋转与压缩的实战代码

"该文档提供了一个使用Vue.js和JavaScript处理图片旋转和压缩的示例代码。通过EXIF数据获取图片的拍摄方向（Orientation），解决因设备不同导致的图片旋转问题，并根据图片大小进行压缩，确保图片小于100KB再进行上传。" 在Web开发中，特别是涉及到用户上传图片的场景，图片的旋转和大小控制是非常常见的需求。Vue.js是一个流行的前端框架，用于构建用户界面，而JavaScript则是其核心语言，用于处理页面上的交互逻辑。本示例代码展示了一个简单的Vue组件，用于处理图片上传、旋转和压缩的过程。 1. 图片上传： 在`<template>`部分，定义了一个`<input type="file">`元素，允许用户选择图片。当用户选择图片后，`@change`事件触发`upload`方法。 2. `upload`方法： - 首先，获取到用户选择的文件，检查是否有选中的文件。 - 然后，将第一个文件赋值给`picValue`，用于后续处理。 - 最后，调用`imgPreview`方法预览和处理图片。 3. `imgPreview`方法： - 使用`Exif.getData`函数获取图片的EXIF信息，包括拍照时的方向（Orientation）。这有助于解决手机拍照时可能出现的图片旋转问题。 - 检查浏览器是否支持`FileReader`，以读取和处理文件。 - 创建一个新的`FileReader`实例，然后使用`readAsDataURL`方法将图片转换为Base64格式的字符串。 - 当文件读取完成后，将结果设置为一个新创建的`Image`对象的`src`属性，以便加载图片。 4. 图片压缩： - 如果图片的Base64编码长度大于100KB，说明图片过大，需要压缩。否则，直接设置`headerImage`并调用`postImg`方法进行上传。 - 在图片`onload`事件中，调用`compress`方法对图片进行压缩，传入图片对象和图片的Orientation信息。 5. `compress`方法： - 压缩方法通常会利用HTML5的Canvas API来实现，首先将图片绘制到Canvas上，然后根据Orientation信息调整Canvas的尺寸，以正确显示图片。 - 接着，使用`toDataURL`方法以更低的质量（例如0.7）重新导出Canvas为Base64格式，从而实现图片的压缩。 - 压缩后的图片可以替换`headerImage`，准备上传。 6. `postImg`方法： - 这个方法用于处理上传压缩后的图片，可能涉及向服务器发送请求，将`headerImage`作为数据发送。 这段代码提供了一个完整的流程，从用户选择图片，到检查图片方向，再到根据需要进行压缩，最后上传处理过的图片。这样的功能在很多应用中都非常实用，如社交媒体、在线相册或个人资料图片上传等场景。