前一阵在公司用vue开发webapp，遇到一个用户拍照或者调用手机相册展示图片，然后上传服务器的需求，接触前端仅半年的我走上了一路踩坑的道路，下面我来说说我遇到的那些坑！
总结一下我的解决办法，希望能对跟我一样还是个小白的人有所帮助
采用h5调取相册 虽然是一句话从网页调取，但是如果想相册，相机都调的话 要这么写 （我真的是查了好久）
图片渲染我采用了canvas ，利用了一个叫 exif.js的插件获取一下手机拍摄的方向（也就是拍照时是竖着拿手机还是横着，），然后判断下设备，对iOS设备的三个方向对图片进行旋转，利用canvas画到画布上
图片渲染时不但要把图片旋转，还要进行压缩，由于现在相机像素太高，高清图片会导致浏览器崩溃，当然如果是做的微信开发，只需要在微信浏览器中适配，那么可以参考微信jssdk中的调用相册的方法，这样就不会有图歪和崩溃的问题了。当然如果不是只做微信，我们还是要进行压缩，同样是采用canvas
（mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ）
最终拿到base64渲染给img标签的src
上面拿到了base64 后台提供一个base64上传图片的接口，base64有个好处是我们获取到的base64 是进行旋转压缩后图片的base64，这样我们上传服务器，或从别的地方展示这个图片都是旋转压缩后的，如果其他页面要展示这张图片，就省去了旋转压缩的过程！其实我现在也不知道为什么通过传文件方式传图片有的安卓机不行，不过改base64上传方式成功后就业没在纠结。
感觉踩了不少坑，归根结底还是自己前端经验不足啊！
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery