最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结。项目代码基于 Vue 框架，为了避免受框架影响，我将代码全部改为原生 API 的实现方式进行说明，同时项目代码中有很多其他额外的细节和功能（预览、裁剪、上传进度等）在这里都省去，只介绍与图片处理相关的关键思路和代码。小程序的实现方式与 H5 类似，不再重述，在文末附上小程序端的实现代码。

拍照

使用<input>标签，type设为"file"选择文件，accept设为"image/*"选择文件为图片类型和相机拍摄，设置multiple支持多选。监听change事件拿到选中的文件列表，每个文件都是一个Blob类型。

拍照

注意：如果连续选择相同文件，第二次选文件不会触发change事件，因为value值未发生变化，而<input>的change事件仅在value变化时触发。解决办法：在 change 事件处理方法中完成对文件的处理后重置value为默认值""，一旦 value 的值被重置，files的值也会同时被自动重置。

图片预览

这个对于前端来说是非常实用的 URL.createObjectURL方法可创建一个本地的 URL 路径指向本地资源对象，下面使用该接口创建所选图片的地址并展示。

图片预览

图片预览

图片旋转

通过相机拍摄的图片，由于拍摄时手持相机的方向问题，导致拍摄的图片可能存在旋转，需要进行纠正。纠正旋转需要知道图片的旋转信息，这里借助了一个叫 exif-js 的库，该库可以读取图片的 EXIF 元数据，其中包括拍摄时相机的方向，根据这个方向可以推算出图片的旋转信息。

下面是 EXIF 旋转标志位（参考JPEG Orientation），总共有 8 种，但是通过相机拍摄时只能产生1、3、6、8 四种，分别对应相机正常、顺时针旋转180°、逆时针旋转90°、顺时针旋转90°时所拍摄的照片。

所以纠正图片旋转角度，只要读取图片的 EXIF 旋转标志位，判断旋转角度，在画布上对图片进行旋转后，重新导出新的图片即可。其中关于画布的旋转操作可以参考canvas 图像旋转与翻转姿势解锁这篇文章。下面函数实现了对图片文件进行旋转角度纠正，接收一个图片文件，返回纠正后的新图片文件。

图片旋转

图片压缩

现在的手机拍照效果越来越好，随之而来的是图片大小的上升，动不动就几MB甚至十几MB，直接上传原图，速度慢容易上传失败，而且后台对请求体的大小也有限制，后续加载图片展示也会比较慢。如果前端对图片进行压缩后上传，可以解决这些问题。

下面函数实现了对图片的压缩，原理是在画布上绘制缩放后的图片，最终从画布导出压缩后的图片。方法中有两处可以对图片进行压缩控制：一处是控制图片的缩放比；另一处是控制导出图片的质量。

图片压缩

图片上传

通过FormData创建表单数据，发起 ajax POST请求即可，下面函数实现了上传文件。

注意：发送FormData数据时，浏览器会自动设置Content-Type为合适的值，无需再设置Content-Type，否则反而会报错，因为 HTTP 请求体分隔符 boundary 是浏览器生成的，无法手动设置。

图片上传

小结

有了上面这些辅助函数，处理起来就简单多了，最终调用代码如下：

最终调用代码

H5 提供了处理文件的接口，借助画布可以在浏览器中实现复杂的图片处理，本文总结了移动端 H5 上传图片这个场景下的一些图片处理实践，以后遇到类似的需求可作为部分参考。

附小程序实现参考

// 拍照wx.chooseImage({ sourceType: ["camera"], success: ({ tempFiles }) => { const file = tempFiles[0] // 处理图片 }});/** * 压缩图片 * @param {Object} params * filePath: String 输入的图片路径 * success: Function 压缩成功时回调，并返回压缩后的新图片路径 * fail: Function 压缩失败时回调 */compressImage({ filePath, success, fail }) { // 获取图片宽高 wx.getImageInfo({ src: filePath, success: ({ width, height }) => { const systemInfo = wx.getSystemInfoSync(); const canvasWidth = systemInfo.screenWidth; const canvasHeight = systemInfo.screenHeight; // 更新画布尺寸 this.setData({ canvasWidth, canvasHeight }) // 计算缩放比例 const scaleX = canvasWidth / width; const scaleY = canvasHeight / height; const scale = Math.min(scaleX, scaleY); const imageWidth = width * scale; const imageHeight = height * scale; // 将缩放后的图片绘制到画布 const ctx = wx.createCanvasContext("hidden-canvas"); let dx = (canvasWidth - imageWidth) / 2; let dy = (canvasHeight - imageHeight) / 2; ctx.drawImage(filePath, dx, dy, imageWidth, imageHeight); ctx.draw(false, () => { // 导出压缩后的图片到临时文件 wx.canvasToTempFilePath({ canvasId: "hidden-canvas", width: canvasWidth, height: canvasHeight, destWidth: canvasWidth, destHeight: canvasHeight, fileType: "jpg", quality: 0.92, success: ({ tempFilePath }) => { // 隐藏画布 this.setData({ canvasWidth: 0, canvasHeight: 0 }) // 压缩完成 success({ tempFilePath }); }, fail: error => { // 隐藏画布 this.setData({ canvasWidth: 0, canvasHeight: 0 }) fail(error); } }); }); }, fail: error => { fail(error); } });}/** * 上传文件 */uploadFile({ uploadUrl, filePath, onData, onError }) { wx.uploadFile({ url: uploadUrl filePath: filePath, name: "file", header: { Cookie: cookie }, success: res => { if (res.statusCode === 200) { onData(res.data) } else { onError(res); } }, fail: error => { onError(error); } });}