前端獲取圖片存儲大小的方法
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 還有一種是通過後臺傳過來接口裏面的圖片信息獲得
把圖片傳到服務器之後,從圖片的文件流中讀取去信息。然後返回給前端。
前端獲取圖片存儲大小的方法