浅谈简单实现file控件的图片预览,裁剪和上传。

时间:2022-05-30 16:57:41

1.图片预览之FileReader对象

   FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据

普及一下Blob对象和File对象(Blob 对象表示一个不可变、原始数据的类文件对象,File对象是基其的扩展)

FileReader对象提供以下api

  1. abort()
  2. readAsArrayBuffer()
  3. readAsBinaryString()
  4. readAsDataURL()
  5. readAsText()

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); 至此,我们成功的完成了图片的本地预览,裁剪和上传。