H5图片上传预览、裁剪功能
来源:互联网 发布:如何提高淘宝店信誉 编辑:程序博客网 时间:2024/06/05 09:39
做项目的构成中需要本地上传图片裁剪并上传服务器,比如用户头像上传预览等其他的图片上传功能;废话不多说直接上~~
第一步:获取文件
HTML5 支持从 input[type=file] 元素中直接获取图片信息,也可以读取图片内容。我们用下面代码就可以实现:
$('input[type=file]').change(function(){ var file = this.files[0];});
第二部:读取文件,并生成 img元素
这一步就需要用到 FileReader 了,这个类是专门用来读取本地文件的。纯文本或者二进制都可以读取,但是本地文件必须是经过用户允许才能读取,也就是说用户要在input[type=file]中选择了这个文件,你才能读取到它。
$('input[type=file]').change(function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload=function(){ // 通过 reader.result 来访问生成的 DataURL var url = reader.result, image = new Image(); image.src=url; }; reader.readAsDataURL(file);});
第三步:获取裁剪坐标
第四部:裁剪图片
这是时候我们就需要用到 canvas 了,canvas 和图片一样,所以新建 canvas 时就要确定其高宽。这里我们还运用到image.naturalHeight 和 image.naturalWidth 这两个属性来获取图片原始尺寸。
将图片放置入 canvas 时需要调用 drawImage。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
因为我们用 canvas 只是用于裁剪图片的,所以需要新建一个 canvas 让它的尺寸和裁剪之后图片的尺寸相等,此时canvas 就相当与我们的裁剪框。运用这个函数还可以将大图缩放成小图。
var x, y, width, height;var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0], ctx=canvas.getContext('2d');ctx.drawImage(image,x,y,width,height,0,0,width,height);$(document.body).append(canvas);
将 canvas 加入文档流之后,就可以看到裁剪后的效果了。不过我们还需要将图片上传至服务器里。
第五步:读取裁剪后的图片并上传
这时我们要获取 canvas 中图片的信息,用 toDataURL 就可以转换成上面用到的 DataURL 。 然后取出其中 base64 信息,再用 window.atob 转换成由二进制字符串。但 window.atob 转换后的结果仍然是字符串,直接给 Blob 还是会出错。所以又要用 Uint8Array 转换一下。总之这里挺麻烦的。。
var data=canvas.toDataURL();// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了data=data.split(',')[1];data=window.atob(data);var ia = new Uint8Array(data.length);for (var i = 0; i < data.length; i++) { ia[i] = data.charCodeAt(i);};// canvas.toDataURL 返回的默认格式就是 image/pngvar blob=new Blob([ia], {type:"image/png"});
这时候裁剪后的文件就储存在 blob 里了,我们可以把它当作是普通文件一样,加入到 FormData 里,并上传至服务器了。
var fd=new FormData();fd.append('file',blob);$.ajax({ url:"upload.php", type:"POST", data:fd, contentType: false, processData: false, cache: false, success:function(){}});
然后你服务器里应该就可以收到这个文件了~
- H5图片上传预览、裁剪功能
- 图片裁剪预览上传
- H5图片上传预览
- 关于H5里的API,上传图片预览功能
- H5下上传图片预览
- 图片上传预览功能
- 图片上传预览功能
- 图片上传预览功能
- 上传图片预览功能
- h5图片上传之图片预览
- 头像上传裁剪预览功能-java
- 上传图片 图片预览功能
- Java实现图片裁剪预览功能
- 移动端H5上传图片预览
- php+js实现图片的上传、裁剪、预览、提交整个功能
- Jcrop插件+Canvas实现图片上传预览+图片裁剪上传
- Extjs 图片上传预览功能
- js图片上传预览功能
- 朴素贝叶斯分类算法(Naive Bayesian classification)
- Android TextView的跑马灯效果以及TextView的一些属性
- .NET Core下的文件文档服务
- groovy map集合使用
- hdu 2082 找单词【多重背包可行性 || 母函数】
- H5图片上传预览、裁剪功能
- Javascript报uncaught typeerror illegal invocation错误
- BaseActivity
- Java学习笔记之Hibernate-Hibernate入门和单表增删改查
- 集合、泛型简单练习
- CodeForces 528 D.Fuzzy Search(FFT)
- 数据结构-栈和队列
- [PHP]模板引擎Smarty深入浅出介绍
- win7 配置apache-tomcat环境