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

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);


至此，我们成功的完成了图片的本地预览，裁剪和上传。

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

猜你喜欢