js压缩图片

将传进来的文件对象压缩为一个设定的宽度；小于就不压缩，避免模糊

• 传进来的是一个文件对象；返回压缩过的base64；

getObjectUrl:function(file){ //返回图片本地路径
	    let url = null;
	    if (window.createObjectURL != undefined) {
	      //console.log("basic");
	      url = window.createObjectURL(file);
	    } else if (window.webkitURL != undefined) {
	      //console.log("webkit or chrome");
	      url = window.webkitURL.createObjectURL(file);
	    } else if (window.URL != undefined) {
	      //console.log("mozilla(firefox)");
	      url = window.URL.createObjectURL(file);
	    }
	    if(!url) return "0"
	    return url;
},

下面方达压缩一次。

dealImage:function(fileObj, callback){
//  小于一定的大小不压缩，图片小于一定的宽度不压缩
            var arg={width:1000};
            var file = fileObj;
            var fileSize=parseInt(file.size/1024);
		 
		    if(fileSize<200){ //小于200KB 不需要压缩,直接返回base64
		      var reader = new FileReader();
		      reader.readAsDataURL(file);
		      reader.onload = (function (file) {
		        return function (e) {
		          callback(reader.result);
		        };
		      })(file)
		      return
		    }
          
            if(file) {
              var src = getObjectUrl(file);
              var img = new Image();
              img.src = src;
              img.onload = function(){
                var that = this;
                  var quality = 0.8;  // 默认图片质量
		        if(fileSize>3072){
		          //大于3M
		          quality = 0.5;
		        }
		        if(fileSize>5120){
		          //大于5M
		          quality = 0.3;
		        }
		        var w = that.width,
		          h = that.height;
		
		        if(w>800){//大于800压缩
		          var scale = w / h;
		          w=800;//按宽度800压缩
		          h=800/scale;
		        }

                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                
                // 绘制水印
				ctx.font = "10px 宋体";
				ctx.fillStyle = "#de4b4c"
				ctx.textAlign = 'right'
				ctx.fillText("水印内容", w - 20, h-20)
				
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 返回base64
                callback(base64);
                 // localStorage.InputAppH5entrance_26_dealImgSizeNo=2; 这里是因为项目中结合了下面循环一起用
        		// dealImage1(base64,callback);//当需要传入file，又要具体大小以下时，结合了下面循环一起用
              }
            }
          }

• 循环判断图片压缩图片至一个要求大小（这里要求100kb以下）（传入base64）

dealImage1:function(base64Data, callback){
   // 大约计算
    var strLen=base64Data.length;
    var fileSize=parseInt((strLen-(strLen/8)*2)/1024);
    
    console.log("dealImage1压缩前:"+fileSize);
    //InputAppH5entrance_26_dealImgSizeNo 是为了出现绘制后比绘制前大的情况
    
    if(fileSize<=100||localStorage.InputAppH5entrance_26_dealImgSizeNo==1){//不需要压缩
      callback(base64Data);
      return
    }
    var src = base64Data;
    var img = new Image();
    img.src = src;
    img.onload = function(){
      var that = this;
      var quality = 0.7;
      if(fileSize>100){
        //大于5M
        quality = 0.6;
      }
      if(fileSize>200){
        //大于3M
        quality = 0.5;
      }

      var w = that.width,
        h = that.height;

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var anw = document.createAttribute("width");
      anw.nodeValue = w;
      var anh = document.createAttribute("height");
      anh.nodeValue = h;
      canvas.setAttributeNode(anw);
      canvas.setAttributeNode(anh);
      ctx.drawImage(that, 0, 0, w, h);

      // quality值越小，所绘制出的图像越模糊
      var base64 = canvas.toDataURL('image/jpeg', quality);
      var endStrLen=base64.length;
      var fileSizeEnd=parseInt((endStrLen-(endStrLen/8)*2)/1024);
      console.log(fileSizeEnd,fileSize);
      if(fileSizeEnd>=fileSize){
        localStorage.InputAppH5entrance_26_dealImgSizeNo=1;
        callback(base64Data);
      }else{
        localStorage.InputAppH5entrance_26_dealImgSizeNo=2;
        gob.dealImage1(base64,callback)
      }

    }
  },