前端图片压缩上传

前端图片压缩上传

前端图片压缩上传

本文章主要是介绍了 上传图片压缩
主要分四步走
1.input上传
2.fileReader转base64预览
3.canvas压缩
4.转换成bold上传图片
1.图片上传，input普通上传

    
    
    
    



    //change获取到上传的文件内容

2.FileReader
FileReader这个对象是做什么的？
主要是用来读取file对象和Blob对象,file对象的对象，Blob是二进制对象
FileReader.onload钩子函数，在这里边处理
FileReader.readAsDataURL：读取方法，返回base64

var render = new FileReader()
render.readAsDataURL(file)
rener.onload=function(ev){
	console.log(ev)//ev.target.result就是获取到的base64
}

3.canvas
canvas压缩图片会用到两个方法drawImage，toDataURL。其中canvas.toDataURL可以实现图片的压缩，canvas.drawImage将选中的图片文件在画布上绘制出来
context.drawImage()经常用到的五个值

 context.drawImage(image（上传的图片）, x（在画布上的横坐标）, sy（在画布上的纵坐标）, Width（在画布上的宽）, Height（在画布上的高）);

context.toDataURL(type,quality)type文件类型默认是image/png,可以自己定义，quality图片质量值在0-1范围内,越小图片压缩的倍数越大

	//先创建canvas画布
	var canvas = document.createElement('canvas');
	//返回一个在画布上绘制2d图的环境对象
     var context = canvas.getContext('2d');
     context.drawImage(image, 0, 0, image.width, image.height);
     canvas.toDataURL(file.type, 0.4)

4.canvas的blob

canvas.toBlob(callback（回调返回blob）, Type（文件类型同toDataURL里边的）, quality（同toDataURL的图片质量）)

 canvas.toBlob(function (blob) {
                        console.log(blob)//这个时候就是缩小的图片
 },file.type,0.2);

整体代码为

如有错误请指正