HTML5与小程序实现图片旋转、压缩与上传技巧

本文主要介绍了如何使用HTML5和微信小程序实现拍照、图片旋转、压缩以及上传功能。在H5端，通过`<input>`标签的file类型结合change事件来捕获用户选择的图片，利用`URL.createObjectURL`方法进行图片预览。在处理图片旋转问题时，文章提到了拍摄角度的问题，并暗示了可能需要处理EXIF信息来正确显示图片方向。对于图片压缩，虽然没有给出具体代码，但提到可以使用canvas进行压缩。最后，提及了上传功能，但没有详细展开。 以下是详细的HTML5和小程序实现拍照图片处理的步骤： 1. 拍照： 使用HTML5的`<input>`标签，将`type`属性设置为`file`，`accept`属性设定为`image/*`，这样可以调用手机摄像头拍照或从相册选取图片。同时，`multiple`属性可以支持多选图片。通过监听`change`事件，获取到选中的文件列表。 ```html <input type="file" accept="image/*" multiple /> ``` 在JavaScript中，可以这样处理选中的图片文件： ```javascript function onFileChange(event) { const files = Array.prototype.slice.call(event.target.files); files.forEach(file => console.log('filename:', file.name)); } document.querySelector('input').addEventListener('change', onFileChange); ``` 2. 图片预览： 通过`URL.createObjectURL`方法，将选中的图片文件转换成URL，然后赋值给`<img>`标签的`src`属性，实现图片的预览。 ```javascript function onFileChange(event) { const files = Array.prototype.slice.call(event.target.files); const file = files[0]; document.querySelector('img').src = window.URL.createObjectURL(file); } ``` 3. 图片旋转： 拍摄的图片可能存在旋转问题，因为相机的元数据（EXIF信息）会记录拍摄时的方向。在显示图片前，需要检查并修正这个方向信息。这通常涉及到读取图片的EXIF信息，然后使用`canvas`进行旋转操作。 4. 图片压缩： 为了减少上传的大小，可以使用HTML5的`canvas`元素对图片进行压缩。通过`canvas`的`toDataURL`方法可以将图片转换成Base64编码，然后根据需要调整其质量参数以达到压缩效果。具体的实现方式可能包括读取图片，设置canvas的尺寸，绘制图片，然后导出压缩后的数据。 5. 图片上传： 压缩后的图片数据可以作为`FormData`的一部分进行上传。`FormData`是用于发送键值对到服务器的一个对象，非常适合处理二进制数据。可以通过`fetch`或`XMLHttpRequest`进行异步上传，通常会监听`progress`事件来显示上传进度。 6. 小程序实现： 小程序的实现方式与H5类似，但可能需要使用微信小程序提供的API，如`wx.chooseImage`用于选择图片，`wx.getImageInfo`获取图片信息，`wx.canvasToTempFilePath`用于压缩图片，以及`wx.uploadFile`进行文件上传。 请注意，实际开发中需要考虑更多细节，比如错误处理、用户体验优化等。在实际应用中，可能还需要考虑兼容性问题和性能优化，确保在各种设备和浏览器上都能正常工作。