图片裁剪(cropper)后上传问题

最近工作需要处理头像裁剪以及上传，研究了几天，写点心得，提醒自己记住踩过的坑，能帮助别人当然更好。

功能基本就是这样：

这里需要注意的是：拿到需求后，不要急于直接上手，花费半个小时，甚至更长时间缕清整个脉络是很有必要的，本人就因为后台接口的问题，返工了...

 

这里只是对完成方法的概述，具体实现功能请自行解决（真的一搜就有）！！！

起先，对这种功能以前并没有接触过，但是鉴于能力问题，采取插件可能是最好的方法。

当然要选取什么插件就成了大问题，幸好本人有一大秘诀，就是去各种已有此功能的网站寻求。

终而发现jcrop（百度用的），而且功能几乎完全符合，便花了一天的时间去了解，使用jcrop来搭建此功能，可是当把一切做好的时候却发现后台的接口只支持file流文件的发送，只有这一个接口，而jcrop提交的却是需要提供图片x，y等种种信息，它并非直接在本地裁剪后，在上传到服务器，故而剧终...

随即发现cropper，也是十分好用的一个裁剪插件，而且它是裁剪后，绘制成canvas直接输出的，可是如何将canvas传递给服务器呢？这里就要引出Blob了...

Blob是什么呢？请允许我百度后告诉你

（我们用到了File对象，而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。

所以， 在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 借口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。）

这样我们只要使用canvas转blob对象发送数据就好拉 canvas.toBlob(callback, type, encoderOptions);

blob上传这里本人用到了formdata，其实也就是新创建一个formdata对象，然后添加blob进入就好。

这里做点拓展：base64如何转成blob发送给后台呢（类似与我们这种只有file流文件接口的）

其实也很简单，

　　function convertBase64UrlToBlob(urlData){

　　　　var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte           

　　　　//处理异常,将ascii码小于0的转换为大于0     

　　　　var ab = new ArrayBuffer(bytes.length);     

　　　　var ia = new Uint8Array(ab);     

　　　　for (var i = 0; i < bytes.length; i++) {          ia[i] = bytes.charCodeAt(i);      }       

　　　　return new Blob( [ab] , {type : 'image/png'});  

　　} 

只要调用方法就ok啦！

采用上述方法，按理说应该就可以了，可是本人试验后，却发现不可行，不知道是不是姿势不对。

之后同事给了一个方法，new File();光看名字就感觉很强硬啊...（u8arr为转换后的blob对象）

不过确实好使啊，一测试ie爆炸了（edge都爆炸）...

这可如何是好？

最终皇天不负有心人，还是让我找到方法啦：

对，就是最后这一个参数，给blob命名，然后就可以顺畅的传送啦...

<!-- 割 -->

 

其实很怕写东西，一是因为自己实力不够，二是怕误人子弟，要是大家耽搁了时间在这里又没有找到答案真的是有点过意不去啊，所以并不会写一步一步怎么做，只是讲个大略，相信有用的人一眼就能发现自己需要的，而觉得无用的也能直接X掉...

 

这个世界，有人在偷偷用心爱着你。