原文照样在简书上： html5 上传当地图片处置惩罚种种题目
这是近来给公司写一个项目，项目请求也许是这模样：
1.上传手机当地图片，然后裁剪（后加的需求）
2.能够扭转图片，用于裁剪（背面加的需求）
3.填写种种笔墨，挑选色彩，以后把笔墨和2个相干的图片，水印到裁剪的图片上，上传服务器天生一个图片地点，返回，分享出去。
功用就是也许上面这些，其他的也就是种种小功用，不提了，手艺选型说下，团体上运用 Vue（包含 router，resource，webpack等等）
那末这几个需求怎样做呢：
1、 当地上传，运用 html5 的 File Api 拿到图片的base64编码，赋值给img的src（坑1，2），然后弹出一个图层，举行裁剪，最最先裁剪是在img的上面套一个div来举行坐标盘算，盘算完了运用canvas来截取图片，然后取值（坑3）。
2、这个功用就是运用canvas的扭转图片处理，须要注重的是，扭转的时刻要坚持横纵比，而且要注重宽高的大小（坑4）。
3、运用canvas来叠加水印和图片即可，主假如注重坐标。
那末说说坑：
1、拿到src的base64编码，看似没有题目，现实上有个庞大的题目，许多图片在手机上显现为竖屏，然则拿到的base64编码，直接赋值给img的src后，发明是横屏的。最最先发明这类状况，以为是个别现象，末了不停尝试以后，发明是个异常广泛的状况，迥殊是IPhone手机，而且还分你挑选的图片文件夹，相册和照片流一致张图片，一个横屏，一个竖屏。致使我完整不能明白这是为何？？？基础一个下昼耗在这个题目上了。
直到晚上归去，问我一个朋侪IOS开辟的大神，@恭弘=叶 恭弘孤城__,他告诉我，由于如今IPhone的摄像头就是横着的，手机里显现竖屏的原因是ios本身做了处置惩罚，他们能够依据图片的一个拍摄角度数值来推断反正题目，然则这个数值在我们web端确拿不到，非常为难。那末怎样处理这个题目呢？？ ——- 我运用的计划:扭转图片，能够让用户本身去主动扭转图片，拔取角度。 另有别的一种处理计划，在坑2也用到，背面讲。
2、除了这个横屏以外，android手机有的上传，挑选了图片以后，没有任何回响反映，我最先一度以为原因是不支持html5的File Api，所以没有显现出上传的图片，背面就种种debugger，发明原因是没有触发Input标签的change事宜，而且不论怎样都没有方法触发，为了处理这个题目，查阅了种种官方文档和stackoverflow以后，发明能够给 type=”file”的input增加两个属性来示意手机上传图片。
<input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>
如许增加了 accept 和 capture以后，有题目的android手机，在挑选图片的时刻，有好几个文件夹，能够挑选了，个中有的能够上传，有的不可，常常细致的测试发明，sd卡上的图片是拿不到的，也就不会触发change事宜，由于没有root权限去拿文件数据。又是一个无解题目，由于你的web在浏览器内里，权限就是低啊，（不得不吐槽下web的权限题目，妈蛋）怎样处理题目呢？？？ 绕过去，也就是说假如你的页面是嵌套在你们公司本身App内里的，就让App帮你，那末我们项目是微信流传的，一定在微信浏览器内里，所以能够挪用微信的JSSDK的挑选图片接口，他是能够超出这些权限，而且另有一个优点，就是处理坑1的题目，他会处置惩罚横屏题目，就是把看着竖屏，现实横屏的上传时都处置惩罚为竖屏，然则价值也不小，你要挑选图片，拿到一个key，然后继续挪用sdk传到微信的服务器，拿到一个serverid，这个id传给本身的服务端，让他们经由历程这个id，去微信下载图片到本身的服务器，返回给你一个Url。历程很迂回，而且下载次数有限定（能够跟微信请求加载限定）；
参考： 微信 js sdk 挑选图片接口
3、我们继续说坑，以上题目，处理了以后，就是裁剪了，最先我运用的计划是这模样的，获取到base64以后，赋值给一个img，然后在这个img上举行框选挪动，盘算坐标然后裁剪，pc端完整没有任何题目，效力很高，然则放到微信上面测试，发明3个题目（妈蛋，手机端就是坑，一个功用，3个差别的题目），第一个题目，人人都晓得如今手机像素高，图片不小，上传过来以后，base64也不小，放到img的src中实在就是内存中了，致使全部微信迥殊轻易崩溃（就是崩溃，他就崩溃了，微信就崩溃了—三遍），第二个题目,运用vue的on来绑定touch事宜，相应很慢，挪动一点都不腻滑，而且也会崩溃，没错，又崩溃了。第三个题目，扭转要运用canvas转化，先去图片数据，转完后，在给图片src赋值，很贫苦。
处理计划： 一致运用canvas，不要再用img，晓得裁剪完成了，把img的base64拿到就行，而且导出的时刻，运用jpeg不假如png，下降一些画质，我以为完整没有影响，也就是图片的裁剪，扭转都是canvas，事宜发起直接原生绑定。
4、扭转的坑，这个的题目是我们必需保留住原始图片的数据，举行canvas先扭转然后drawImage，要不没有扭转出来，canvas本身的imageData，貌似没有方法扭转，我试了矩阵的体式格局彷佛都不可（也多是本身数学不好！！！假如有人晓得，就demo）。
以上就是此次项目，碰到的种种大坑，其他都是小的处所，不过整体来讲，完成了使命，而且运用了新的手艺Vue.js。Vue的component照样异常好用的，注重父子关系，props的继续就没题目了。
迎接人人交换相干手艺， 假如对Vue感兴趣，能够加QQ群： 364912432，240319632。
