工作-根据base64或者url获取图片字节大小

大大源码 • 2023年3月21日 pm9:52 • 其他

背景

在上传图片时，发现如果图片过大，传给后端时会出现数据丢失的情况。如果统一压缩处理，又会出现原本很小的文件再次压缩导致图片严重失真。

结合诸多背景，就需要在根据网络url或者base64拿到图片大小。
再根据大小考虑是否需要压缩。

参考一些文章，总结以下几种拿到图片大小的方式，方便后续自己使用：

通过请求的content-length
通过访问这个网络资源
通过base64的长度
通过生成img之后在load方法拿到size

下面挨个说下这几种方法：

1、通过请求的content-length

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

2、通过访问这个网络资源

function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
  }
    
  var picLink = "https://img.alicdn.com/tfs/TB1ZUuMgb9YBuNjy0FgXXcxcXXa-298-170.png";
  var size = this.getImageSizeInBytes(picLink);
  var size_image = size / 1000;

3、通过base64的长度

这种方式我试了下并不想博客说的偏差很小，我的反而偏差很大，不知道为什么。

Base64编码要求把3个8位字节（38=24）转化为4个6位的字节（46=24），之后在6位的前面补两个0，形成8位一个字节的形式。如果剩下的字符不足3个字节，则用0填充，输出字符使用’=’，因此编码后输出的文本末尾可能会出现1或2个’=’

getImgByteSize(data) {
	if (data.graphicContents) { // 获取base64图片byte大小
		const equalIndex = data.graphicContents.indexOf('=');  // 获取=号下标
		if (equalIndex > 0) {
			const str = data.graphicContents.substring(0, equalIndex); // 去除=号
			const strLength = str.length;
			const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
			data.size = Math.floor(fileLength); // 向下取整
		} else {
			const strLength = data.graphicContents.length;
			const fileLength = strLength - (strLength / 8) * 2;
			data.size = Math.floor(fileLength); // 向下取整
		}
	} else {
		data.size = null;
	}
	}

4、通过生成img之后在load方法拿到size

这种方式我试了下，哇拿到的速度好慢。。反正感觉也不好用

let url = 'url';
const canvas = document.getElementById('canvas');
let ctx = null;
var img = new Image();
img.src = url;
img.setAttribute('crossorigin', 'anonymous'); // 设置图片跨域应该在图片加载之前
img.onload = function(e) {
	//将图片的绝对宽高绘制在canvas上
	canvas.width = img.width;
	canvas.height = img.height;
	ctx = canvas.getContext('2d');
	ctx.drawImage(img,0,0);
	canvas.toBlob(function(res){
		console.log(res.size);//图片真实存储大小
	},'image/jpeg',1)
	let base64 = canvas.toDataURL('image/jpeg', 1);
}