1.图片预览之FileReader对象
FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据
普及一下Blob对象和File对象(Blob
对象表示一个不可变、原始数据的类文件对象,File对象是基其的扩展)
FileReader对象提供以下api
2和4 的区别在于一个返回读取结果是一个 ArrayBuffer 对象。后一个是读取结果是一个基于Base64编码的 data-uri 对象。
图片预览,很显然后者更合适。
readAsDataURL
是异步的,写法类似new一个Image()对象。
贴上部分代码:
var reader = new FileReader();
reader.onload = (function (file) {
return function (event) {
var img='<img src="'+this.result+'" id="test">'
// 返回一个this.result 为base64编码的图片数据。创建一个img,push到页面上就可以查看。
}
};
})(event.target.files[0]);
reader.readAsDataURL(event.target.files[0]);
是不是很像 var img=new Image() img.onload=function(){};img.src=""。
2.图片裁剪,jcrop.js,canvas,
图片裁剪用了jcrop插件,该插件返回 所选区域的x,y坐标,拉选框的宽高,这四项是我们截图的依据。
截图我们用canvas截,
贴码
var img=document.getElementById("test"); //图片id
var canvas = document.getElementById("canvas"); // 画布对象,网上很多人用canvas画图不显示,需要写在img.onload事件内,其实不需要,是因为没有这个对象。
canvas.width = img.width;
canvas.height =img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,c.x,c.y,c.w,c.h,0,0,c.w,c.h); c为crop返回的相关参数。drawImage的参数如何使用可以查看3cschool。
var dataURL = canvas.toDataURL("image/png"); //我们得到一个返回一个包含图片展示的 data URI (base64描述的二进制流);
3.data URI转二进制流 1.将base64解码 atob()
2.创建一个8 位无符号整数值的类型化数组。内容将初始化为 0
3.逐一读取解码的值,用charCodeAt() 方法返回指定位置的字符的 Unicode 编码。
4.将其实例化为一个File对象或Blob对象,以供操作。
var arr = DataUrl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], "XX.png", {type:"image/png"});
3.FormDate对象模拟表单提交。
FormData对象用以将数据编译成键值对,以便ajax
来发送数据。
比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件
formdata对象提供append方法往其内部插入键值对,包括插入file对象blob对象
var formData= new FormData();
formData.append("uploadFile",imgdata); 至此,我们成功的完成了图片的本地预览,裁剪和上传。