前端获取图片大小的几个方式[B君笔记][博客]

noscript{position: fixed}前端获取图片大小的几个方式前端创建时间：2021-12-15 18:43:25

input

这个大家很熟悉了，在用户上传的时候可以用于检测文件大小

<input type="file" id = 'file' multiple/><br/>
<script>
document.getElementById("file").addEventListener("change", selectFile, false);

function selectFile(e) {
  var files = e.target.files;
  console.log(files[i].size);
}
  </script>

fetch

<script>
  fetch('a.png').then(function(res){
    return res.blob()
  }).then(function(data){
	console.log(data.size)
  })
</script>

渐进式图片实验页面分享和改进-主要代码中涉及到

performance

<img src='a.png'>
<script>let iTime = performance.getEntriesByName('a.png')[0];
console.log('文件大小：'+(iTime.decodedBodySize))

</script>

通过Performance测网络下行网速和php输出指定大小图片中涉及到，注意有兼容性问题

canvas.toBlob

 let img = new Image();
    if (img) {
      img.onload = function () { // 利用canvas进行转换
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(function(Blob){console.log(Blob.size)}); // 转换好的base64编码
      };
      img.src = 'https://bjun.tech/?_x=file.out&idm=215309b&extr=670x250&f=jpg,webp';
    }

由于是重新绘制，canvas.toBlob处理后的大小并不是原来的大小。适用于前端压缩、裁剪后，上传前的判断。