前端獲取圖片存儲大小的方法

1利用input元素獲取

若是是input元素

<input type="file" id='myinput'>

 

var file=document.getElementById('myinput');

var fileData = file.files[0];

var size = fileData.size;   //注意，這裏讀到的是字節數

 

2若是不是input元素，是通常的IMG元素

 先把圖片轉換成canvas，而後再轉爲base64碼，經過獲取base64.length來獲取圖片的大概尺寸。經過canvas轉換後圖片通常會變小一些，可是這個不能精準地獲取圖片大小，不推薦使用。

function compressImg(image, quality) {

      var width = image.width;

      var height = image.height;

      var canvas = document.createElement("canvas");

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

      canvas.width = width;

      canvas.height = height;

      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        var base64 = canvas.toDataURL('image/jpeg', quality);

      return base64;

}

 

3 還有一種是經過後臺傳過來接口裏面的圖片信息得到

把圖片傳到服務器以後，從圖片的文件流中讀取去信息。而後返回給前端。