图片转base64、判断图片大小、图片压缩、图片上传 FileReader

文章主要介绍 js 实现压缩上传图片base64长度功能，三大框架（React、Vue、Angular）可借此参考。

逻辑功能包含图片转base64、判断图片大小、图片压缩，这个方法真实可用，已实践。

第1步，调用 FileReader 的 reader.readAsDataURL(img)，  在其onload事件中, 将用户选择的图片读入 Image对象。

第2步，在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.

第3步， 通过 canvas.toDataURL("image/jpeg", 1), 将图片变成base64字符串。

html

js

function imgChange(e){

    if (e.files.length != 0) {

      var file = e.files[0],

      fileType = file.type,

      reader = new FileReader();

      if (!reader) {

        e.value = '';

        return;

      };

      reader.onload = function(ev) {

        var result = ev.target.result;

        var data = img_compress(file, result);

        // 接下来可以做图片展示 -》图片上传

        img_show(data);       

        img_upload(data);

      };

      reader.readAsDataURL(file);

    }

  }

/**

 * 图片大小判断、图片压缩处理

 * @param file，图片信息

 * @param result，img base64

 */

function img_compress(file, result) {

     var size = file.size;

     var fileType = file.type;

     if(size > 1024 * 5000 ){ // >5M

           var img = new Image(); 

           img.src = result;

           img.onload = function(e){

                var scale = 1;  

                if((this).width > 300 || (this).height > 300){  

                if((this).width > (this).height){ 

                     scale = 300 / (this).width; 

                 }else{  

                      scale = 300 / (this).height; 

                 }  

             }

             var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d");

             if(scale!=1) {//按最大高度等比缩放

                   img.width *= scale;

                   img.height *= scale

             }

             canvas.width = img.width;

             canvas.height = img.width * (img.height / img.width);

             drawer.drawImage(img, 0, 0, canvas.width, canvas.height);

             var tmp_code = result = canvas.toDataURL(fileType);

             if(tmp_code!='data:,'){

                    result = tmp_code;

             }

         }; 

     }

     return result;

}

/**

 * 图片展示，处理页面展示图片

 * @param result，img base64

 */

function img_show(img_base64){

    if(img_base64 != 'data:,'){

      $("#img_show").val(image_base64);

    }

}

/**

 * 图片上传，将base64通过接口上传

 * @param result，img base64

 */

function img_upload(image_base64){

    // 走接口上传

}