在项目中经常遇到需要将本地图片上传至服务端的情况，免不了要本地预览选择的图片，图片太大的情况下还需要对图片进行一番压缩，通过最近做的项目，对这几种图片处理情况做一个总结。
本文主要解决的问题：
1.图片在线预览功能
2.图片压缩
3.通过formData 对象上传图片
图片在线预览功能：
需要了解的内容：
FileReader 对象
html5为读取上传文件的数据所提供的对象，它包含以下几个方法：
readAsBinaryString（Blob/file）：把文件内容以二进制的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。
readAsText（Blob/file， "utf-8"）：把文件内容以文本字符串的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。（可以为它指定编码格式）
readAsDataURL(Blob/file) :把文件内容以DataURL的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。
什么是Blob对象？
Blob对象就是选择文件的原始数据类型，它提供slice方法可以读取原始数据中某一块数据，如果上次文件较大，可以利用Blob可切割的特性将文件分批次上传。
我们的主要思路是将选择的图片文件转换成DataURL的形式，再把dataURL赋给img标签的src属性即可，因此我们的第一种方法是利用FileReader 的readAsDataURL方法，转换为我们想要的数据格式。
首先，在html里创建一个选取文件的元素：
再创建一个在线预览的按钮和显示区域：
js中的操作（readAsDataURL的方式）：
varreadAsDataURL=document.querySelector("#readAsDataURL");
varimg=document.querySelector("#img");
readAsDataURL.addEventListener("click",function(){
////获得文件
varfiles=document.querySelector("#upload").files;
if(files.length>0){
////创建FileReader对象
varreader=newFileReader();
////将文件以dataURL读取， 把文件放在了reader.result上
reader.readAsDataURL(files[0]);
////读取完毕，执行后续操作
reader.onload=function(){
img.setAttribute("src",this.result);
}
}
});
除此之外，还可以利用window.URL中的createObjectURL方法，该方法可以生成一个url对象，不仅能实现预览功能还可以对文件进行下载。
varcreateObjectURL=document.querySelector("#createObjectURL");
varimg=document.querySelector("#img");
createObjectURL.addEventListener("click",function(){
varfiles=document.querySelector("#upload").files;
if(files.length){
varurl=window.URL.createObjectURL(files[0]);
////可实现图片预览功能
img.setAttribute("src",url);
}
});
下载创建a标签：
vara=document.createElement("a");
a.href=url;
a.download="usual";
a.innerHTML="下载";
////添加到body
document.body.appendChild(a);
图片压缩：
思路：
1.读取图片 readAsDataURL
2.创建image对象，获取图片的原始尺寸大小
3.创建canvas，把图片付给canvas，绘制，设置绘制的大小这就相当于压缩canvas.drawImage(img, 0, 0, height, width)
4.把canvas又转成dataURL的形式。压缩完成
首先以readAsDataURL的方式读取文件,创建image对象，以便获取图片的原始尺寸大小：
uglify.addEventListener("click",function(){
varfiles=document.querySelector("#upload").files;
varimg=newImage(),single=true;
vartype="";
if(files.length){
varfileReader=newFileReader();
type=files[0].type;
fileReader.readAsDataURL(files[0]);
fileReader.onload=function(){
img.src=this.result;
};
}
});
result赋给img的src后，监听img是否加载完成，进行下一步操作：
img.onload=function(){
////因为后面会再次修改img的src属性，为了避免死循环
if(!single){
return;
}
////获取原始图片的宽度和高度
varsheight=img.height;
varswidth=img.width;
////创建canvas
varcanvas=document.createElement("canvas");
varcvs=canvas.getContext("2d");
////缩小图片的尺寸，等同于压缩
canvas.height=sheight*0.6;
canvas.width=swidth*0.35;
////在画布上得到压缩的图片
cvs.drawImage(img,0,0,sheight/2,swidth/2);
////type是原图片的类型
varresultData=canvas.toDataURL(type);
single=false;
img.src=resultData;
document.body.appendChild(img);
};
图片上传：
利用formData对象可以使用一系列的键值对来模拟一个完整的表单文件，然后用ajax发送这个表单。
//创建formData对象:
vardata=newFormData();
//添加参数，通过append
varfiles=document.querySelector("#upload").files;
data.append("file",files[0]);
//通过ajax 发送
varxml=newXMLHttpRequest();
xml.open("post","url");
xml.send(data);
xml.onreadystatechange=function(value){
if(xml.readyState==4){
////......
}
}