图片裁剪(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掉...
这个世界,有人在偷偷用心爱着你。
图片裁剪(cropper)后上传问题的更多相关文章
- 图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
- 适应各浏览器图片裁剪无刷新上传jQuery插件(转)
看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- #添加图片,最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
- 简单的 Android 拍照并显示以及获取路径后上传
简单的 Android 拍照并显示以及获取路径后上传 Activity 中的代码,我只贴出重要的事件部分代码 public void doPhoto(View view) { destoryBimap ...
- puzz: 图片和表单上传的不一致问题
1. 方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2. 方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...
- C# 防止content-type修改后上传恶意文件
以图片为例子.在上传图片的时候,使用Fiddler抓取 通过js判断文件类型是不安全的,所以通过后台来判断,代码如下: ) { HttpPostedFile file0 = Request.Files ...
随机推荐
- wemall app商城源码Android中ViewHolder详细解释
1.ViewHolder的解释: (1).只是一个静态类,不是Android的API方法. (2).它的作用就在于减少不必要的调用findViewById,然后把对底下的控件引用存在ViewHolde ...
- checkSelfPermission 找不到 Android 动态权限问题
checkSelfPermission 找不到 Android 动态权限问题 最近写了一个Demo,以前好好地.后来手机更新了新系统以后,不能用总是闪退.而且我的小伙伴的是android 7.0系统 ...
- react router路径的匹配原则
路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了. (1):paramName :paramName匹配URL的一个部分,直到遇到下一个/.?.#为止.这个路径参数可以通过this.pro ...
- 使用htmlparse爬虫技术爬取电影网页的全部下载链接
昨天,我们利用webcollector爬虫技术爬取了网易云音乐17万多首歌曲,而且还包括付费的在内,如果时间允许的话,可以获取更多的音乐下来,当然,也有小伙伴留言说这样会降低国人的知识产权保护意识,诚 ...
- ICC_lab总结——ICC_lab3:布局
PS:字丑,禁止转载. 做到了ICC workshop的第三个实验,理论与实践相结合,于是,先放一张总结图,这张总结图来自前面的博客,放在这里用来体现理论和实践的联系: 这个就是布局的理论部分,在IC ...
- 微信公众号java开发思路
方法一:不开启开发模式,直接在自定义菜单中跳转到网页,适用于流量较小的公众号. 方法二:开启开发者模式,关闭自带的自定义菜单和消息回复,接入自己开发的应用 1.接入校验:创建s ...
- SpringMVC REST 风格请求介绍及简单实践
简介 REST 即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越 ...
- fastjson升级版本遇到的问题
前面的话: 有关阿里的fastjson升级时遇到的问题,链接如下 https://github.com/alibaba/fastjson/wiki/enable_autotype 我要说的,是我碰到这 ...
- javaWEB与cookie
Cookie1. Http协议与Cookie(了解) * Cookie是HTTP协议制定的!先由服务器保存Cookie到浏览器,再下次浏览器请求服务器时把上一次请求得到Cookie再归还给服务器 ...
- java iframe 嵌套,session失效重新登录页面嵌套问题
将后台跳转改写成 PrintWriter out = response.getWriter(); out.println("<html>"); out.print ...