当前位置: 首页 - 编程技术 - 文章正文

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

xiaoqihv
背景

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

结合诸多背景,就需要在根据网络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);} 总结

有遇到同样问题的小伙伴,可以参考下,对base64等等我了解也不是特别深,有机会搞清楚这些东东。。

文章地址:https://wenmayi.cn/post/464.html