网络上有许多的实现图片预览功能的案例，这些案例大部分都存在一个问题就是在手机等移动数码设备上，拍照成像后的预览图居然会被旋转。
实现预览的大概有以下几个过程：
- 监听 文件选择框 的 onchange 事件；
- 通过 FileReader() 创建的实例对象的 readAsDataURL() 方法获得图片文件的 base64 数据；
- 将 base64 数据赋值给图片或元素背景图，生成预览效果。
目录，PS：点击下方链接可直跳转到文章对应位置
体验地址：https://www.jq22.com/jquery-info22380
小编之前都是这么做，而且PC端是不会有什么问题的，但是移动端设备因为手持设备角度的问题，导致图片预览有各种角度。查看过许多网站，有好一部分网站都存在这个问题，包括中国某混合式APP的开发平台网站，但是 某东 网站是解决了这个问题的。
经过网上的一翻搜寻和结合自己的经验后找到了两种解决方案：
#1，偷懒方案：使用 Web Uploader 插件
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
该插件生成的预览图能很方便的解决图片被旋转问题，但是存在两个比较大的问题：
- 图片的预览图是解决了图片被旋转问题，但是上传的文件对象还是原来的未处理被旋转问题的文件信息，所以用这个插件来解决如题所示的问题的话，能解决一半的问题。有个曲线救国的方法就是直接上传预览图所生成的解决了旋转问题的预览图数据；
- 使用预览图数据有一个尴尬的地方，那就是生成预览图时的方法需要填写 宽 和 高 2个参数，但在未生成预览图之前，没有方法可以获取原图尺寸，导致图片被 裁剪 或 拉伸 的情况出现，着实有点不太满意；
如果说是要做PC端的图片预览 Web Uploader 是一款非常棒的插件，兼容性好。
小编(产品经理)当然不会接受这种方式了，只能使用方案二啦！
#2，自强方案：用勤劳的双手撸完整个功能
自强存在两个大的技术问题需要解决：
- 获取图片被旋转的角度；
- 根据旋转角度，通过 canvas 重绘出正确的角度图像；
获取图片被旋转角度，可通过 exif.js 来获取，该js库可去npm官网下载：https://www.npmjs.com/package/exif-js
图像重绘问题可参考文章：https://blog.csdn.net/xiaoermingn/article/details/94398621
在文章的最后，小编奉上已经写好的源码，贡各位阅读老爷们直接在线体验
体验地址：https://www.jq22.com/jquery-info22380
提醒：通过手机或其它移动设备打开体验地址，进行在线体验。源码除了生成预览图之外还提供了图片的质量和尺寸压缩，减小上传图片数据的体积。提高上传速度。源码注释清晰，可免费下载源码。
作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
