js压缩上传图片

一、html部分

<input type="file" onchange="compressImg(this)" accept="image/jpeg"/>

二、js部分
1.获取图片文件

//获取图片文件
function compressImg(file){
    var base64,file=file.files[0];
    var maxSize=1024*1024*8;//最大不超过8M
    var imgSize=file.size;
    if(maxSize<imgSize){
        alert('上传图片不能超过8M');
        file.value='';
        return
    }
    var reader=new FileReader();
    reader.onload=function(e){
        base64=e.target.result;
        canvasDataURL(base64);
    }
    reader.readAsDataURL(file);
}

2.利用canvas压缩图片，根据画布大小和图像质量压缩

//利用canvas压缩图片，根据画布大小和图像质量压缩
function canvasDataURL(base64){
    var img=new Image();
    img.src=base64;
    img.onload=function(){
        //默认按照比例压缩
        var scale=this.width/this.height;
        //规定压缩后的大小
        var canvasWidth=600;
        var canvasHeight=canvasWidth/scale;
        //生成canvas
        var canvas=document.createElement('canvas');
        var ctx=canvas.getContext('2d');
        //创建节点属性
        canvas.width=canvasWidth;
        canvas.height=canvasHeight;
        var anw=document.createAttribute('width');
        anw.nodeValue=canvasWidth;
        var anh=document.createAttribute('height');
        anh.nodeValue=canvasHeight;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(this,0,0,canvasWidth,canvasHeight);
        //图像质量,值越小，所绘制出的图像越模糊
        var quality=0.92;
        var base64String=canvas.toDataURL('img/jpeg',quality);
        //通过base64获取二进制文件
        var blob=getBlobByBase64(base64String);
        //上传图片
        uploadImg(blob);
    }
}

3.通过base64获取二进制文件

//通过base64获取二进制文件
function getBlobByBase64(base64String){
    var arr=base64String.split(','),mine=arr[0].match(/:(.*?);/)[1],
    bstr=atob(arr[1]),n=bstr.length,u8arr=new Uint8Array(n);
    while(n--){
        u8arr[n]=bstr.charCodeAt(n);
    }
    return new Blob([u8arr],{type:mine});
}

4.请求上传文件接口

//请求上传文件接口
function uploadImg(blob){
    var url='http://www.baidu.com';//需要上传的接口地址
    var fd=new FormData();
    //上传文件参数(看接口需要传什么)
    fd.append('file',blob,'authonValidate.jpeg');
    fd.append('file_type','.jpg');
    fd.append('file_id','');
    //XMLHttpRequest
    var xhr=new XMLHttpRequest();
    xhr.open('post',url);
    //请求头参数（看接口需要传什么）
    xhr.setRequestHeader('token',sessionStorage.getItem('token'));
    xhr.setRequestHeader('comId',sessionStorage.getItem('comId'));
    xhr.onreadystatechange=function(){
        if(xhr.readyState!=4){
            return;
        }
        var data=JSON.parse(xhr.responseText);
        //回执渲染
    }
    xhr.send(fd);
}

三、注解：

• ajax无法请求流文件，需要使用XMLHttpRequest 请求。
• blob对象代表二进制类型的对象，类似文件对象的二进制数据。
• blob URL 是blob形式的url，格式blob:http://XXX，可以通过URL.createObjectURL(blob)创建。
• blob URL只能应用内部使用，不能像data URL一样在浏览器上随意使用。
• 上传文件可以用base64，也可以用blob对象，看请求方式。

欢迎大家指点~