原文地址： github.com/whinc/blog/…
最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结。项目代码基于 Vue 框架，为了避免受框架影响，我将代码全部改为原生 API 的实现方式进行说明，同时项目代码中有很多其他额外的细节和功能（预览、裁剪、上传进度等）在这里都省去，只介绍与图片处理相关的关键思路和代码。小程序的实现方式与 H5 类似，不再重述，在文末附上小程序端的实现代码。
拍照
使用 <input> 标签， type 设为 "file" 选择文件， accept 设为 "image/*" 选择文件为图片类型和相机拍摄，设置 multiple 支持多选。监听 change 事件拿到选中的文件列表，每个文件都是一个 Blob 类型。
<input type="file" accept="image/*" multiple />
<img class="preivew" />
<script type="text/javascript">
function onFileChange (event) {
const files = Array.prototype.slice.call(event.target.files)
files.forEach(file => console.log('file name:', file.name))
}
document.querySelector('input').addEventListener('change', onFileChange)
</script>图片预览
URL.createObjectURL 方法可创建一个本地的 URL 路径指向本地资源对象，下面使用该接口创建所选图片的地址并展示。
function onFileChange (event) {
const files = Array.prototype.slice.call(event.target.files) const file = files[0]document.querySelector('img').src = window.URL.createObjectURL(file)
}
图片旋转
通过相机拍摄的图片，由于拍摄时手持相机的方向问题，导致拍摄的图片可能存在旋转，需要进行纠正。纠正旋转需要知道图片的旋转信息，这里借助了一个叫 exif-js 的库，该库可以读取图片的 EXIF 元数据，其中包括拍摄时相机的方向，根据这个方向可以推算出图片的旋转信息。
下面是 EXIF 旋转标志位，总共有 8 种，但是通过相机拍摄时只能产生1、3、6、8 四种，分别对应相机正常、顺时针旋转180°、逆时针旋转90°、顺时针旋转90°时所拍摄的照片。
