图片压缩和上传

版权声明： https://blog.csdn.net/GoldenLegs/article/details/81145151

 思路与步骤:

1.原图画成限制高度的canvas

2.canvas转base64格式图片

3.base64格式转blob对象

4.blob对象添加formData对象之后上传

具体如下:

            //上传基于jquery,如需请引用
             //添加图片返回的对象
            var files=this.files[0]
             //创建读取文件的对象  
             var reader = new FileReader();  
              //图片转dataURL
              reader.readAsDataURL(files);  

              reader.onload=function(e) {  

                  console.log('图片压缩中');
                  var imgFile = this.result;  
                  console.log(imgFile);  
                  var MAX_HEIGHT = 1600; //此处为图片最大高度,可改
                  //压缩图片
                  // 创建一个 Image 对象
                  var image = new Image();
                  image.src=imgFile
                  image.onload=function(){
                    var canvas = document.createElement("canvas");
                      //高度大于宽度图片
                      if (image.height > MAX_HEIGHT && image.height >= image.width) {
                                  // 宽度等比例缩放 *=
                                  image.width *= MAX_HEIGHT / image.height;
                                  image.height = MAX_HEIGHT;
                              }
                      //宽度大于高度图片
                      if (image.width > MAX_HEIGHT && image.width > image.height) {
                                  // 宽度等比例缩放 *=
                                  image.height *= MAX_HEIGHT / image.width;
                                  image.width = MAX_HEIGHT;
                      }

                      // 获取 canvas的 2d 画布对象,
                      var ctx = canvas.getContext("2d");
                      // canvas清屏，并设置为上面宽高
                      ctx.clearRect(0, 0, canvas.width, canvas.height);
                      // 重置canvas宽高
                      canvas.width = image.width;
                      canvas.height = image.height;
                      // 将图像绘制到canvas上
                      ctx.drawImage(image, 0, 0, image.width, image.height);
                      let simg=new Image();
                      simg.src = canvas.toDataURL("image/png");
                      //计算压缩后大小
                      var str=simg.src.substring(22);
                      var equalIndex= str.indexOf('=');
                      if(str.indexOf('=')>0)
                      {
                          str=str.substring(0, equalIndex);
                      }
                      var strLength=str.length;
                      var fileLength=parseInt(strLength-(strLength/8)*2); //压缩后大小
                      console.log(fileLength)
                      

                      function dataURItoBlob(base64Data) { //base64图片转blob
                          var byteString;
                          if (base64Data.split(',')[0].indexOf('base64') >= 0)
                          byteString = atob(base64Data.split(',')[1]);
                          else
                          byteString = unescape(base64Data.split(',')[1]);
                          var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
                          var ia = new Uint8Array(byteString.length);
                          for (var i = 0; i < byteString.length; i++) {
                          ia[i] = byteString.charCodeAt(i);
                          }
                          return new Blob([ia], {type:mimeString});
                      }
                      var blob = dataURItoBlob(simg.src);
                      console.log(blob)
                      $.hideLoading();
                      var form = new FormData();
                      form.append("file", blob ,'image.png');
                       
                       //以下部分为上传
                       $.ajax({
                        url:'/dataService/upload/image' , 
                        type:'post',
                        data:form, 
                        dataType:'json',
                        async:false,
                        contentType:false,
                        processData:false,
                        success:function(res){
                          console.log(res)                         
                        }
                      })
                  }
              };  

如需了解blob对象,转至http://www.cnblogs.com/hhhyaaon/p/5928152.html

FileReader对象讲解:https://blog.csdn.net/goldenlegs/article/details/81145093