js压缩图片

思路：

1.如果有图片路径我们可以直接将图片路径转为image,再通过canvas压缩,再转为base64编码图片,再转为blob文件就可以传给后台了。
src => image => 压缩 => base64 => blob

2.如果我们从input拿到的图片没有路径，先获取input拿到的文件的路径，然后跟第一步一样。
file => src => image => 压缩 => base64 => blob

实现：

html:

压缩

js

var imgbox=document.getElementById("img-box");
//压缩按钮的点击事件
   function getfile(){
               //我们先拿到input的文件
       var fileList = document.getElementById("imgfile").files[0];

               //打印压缩前的图片信息
       console.log('压缩前',fileList);

             //获取文件的url
               var reader= new FileReader();
       reader.readAsDataURL(fileList);

        // 当文件读取成功时执行的函数
       reader.onload=function(e){
                     
                     //开始压缩（有图片路径可以不执行上面的直接传路径）
           yasuo(this.result);//这里参数是图片路径this.result为图片的base64地址
                     
                     //预览压缩前图片
           var img1 = document.createElement("img");
           img1.src=this.result;
           imgbox.appendChild(img1);
       }
   }

//压缩启动事件
 function yasuo(img){
   //先转成image对象
    var image = new Image();
     image.crossOrigin = '';
     image.src = img;
     image.onload = function(){
       //先将images通过canvas压缩再转成base64;
       var base64 = getBase64Image(image);
     
     //再将base64转化为bold
       var img2 = convertBase64UrlToBlob(base64);
       //打印压缩后的图片信息
       console.log('压缩后',img2);
       
       //预览压缩后的图片
       var img2 = document.createElement("img");
   img2.src=base64.dataURL;
   imgbox.appendChild(img2);
       
     } 
}

     /* 
      * 图片的路径地址 转换成base64编码 如下代码： 
      */
     function getBase64Image(img) {
       var canvas = document.createElement("canvas");
       canvas.width = img.width;
       canvas.height = img.height;
       var ctx = canvas.getContext("2d");
        //这里选择压缩的比例
   var canvaswidth = img.width*0.1;
       var canvasheight = img.height*0.1;

       canvas.width = canvaswidth;
   canvas.height = canvasheight;
       ctx.drawImage(img, 0,0,img.width,img.height,0,0, canvaswidth, canvasheight);
       var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
       var dataURL = canvas.toDataURL("image/"+ext);
       return {
         dataURL: dataURL,
         type: "image/"+ext
       };
     }

     /**  
      * 将以base64的图片url数据转换为Blob  
      * 用url方式表示的base64图片数据  
      */  
     function convertBase64UrlToBlob(base64){ 
       var urlData =  base64.dataURL;
       var type = base64.type;
       var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
       //处理异常,将ascii码小于0的转换为大于0  
       var ab = new ArrayBuffer(bytes.length);  
       var ia = new Uint8Array(ab);  
       for (var i = 0; i < bytes.length; i++) {  
           ia[i] = bytes.charCodeAt(i);  
       }  
       return new Blob( [ab] , {type : type});  
     }

   //如果需要判断文件大小 ，图片大小验证同意通过比对bold文件的size属性进行对比size是字节除以1024为kb  这里暂时不需要
function verificationPicFile(file) {
   var fileSize = file.size;
   var fileMaxSize = 500;//500kb
       var size = fileSize / 1024;
       if (size > fileMaxSize) {
           alert("文件大小不能大于500kb！");
           return false;
       }else if (size <= 0) {
           alert("文件大小不能为0M！");
           return false;
       }else{
         console.log(fileSize);
         //向后台上传文件（可以用formdata的方式上传哦）
       }
}

TIM图片20190710181141.png

可以看到压缩前图片大小为11230 而压缩后只有4135