menu 山水有轻音
more_vert
js如何将数据流图片进行压缩再上传
2020-09-05 | 前端,js知识 | 暂无评论 | 49 次阅读 | 288字

一、html

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

二、获取上传文件操作

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

三、特别说明

  • blob对象代表二进制类型的对象,类似文件对象的二进制数据。
  • blob URL 是blob形式的url,格式blob:http://XXX,可以通过URL.createObjectURL(blob)创建。
  • blob URL只能应用内部使用,不能像data URL一样在浏览器上随意使用。
  • 上传文件可以用base64,也可以用blob对象,看请求方式。
None
发表评论
暂无评论
textsms
account_circle
email
link