如何根据图片url获取到图片存储大小

利用canvas压缩图片 中遇到的问题，如何根据图片url获取到图片存储大小。

1 利用performance

window.performance.getEntriesByName(imgUrl)[0].decodedBodySize; 
// 或者encodedBodySize, transferSize

1.1 performance说明

Performance 接口可以探测某个被加载的资源的各项指标。
Performace API在浏览器进行资源加载时，会自动生成每个资源的PerformanceEntry对象，自动生成的PerformanceEntry对象，其entryType一般有三种：resource、navigation和paint。
对于图片、css、脚本等资源文件，其entryType是resource，与之相对应的是扩展了PerformanceEntry的PerformanceResourceTiming接口，其中的属性提供有关获取资源大小的数据以及初始化时获取的资源类型。比如，一个图片资源对应的PerformanceResourceTiming对象中，会包含以下属性(部分):

getEntriesByName 该方法返回一个给定 name名称 和 type属性 的PerformanceEntry对象数组，name的取值对应到资源数据中的name字段，type取值对应到资源数据中的entryType字段。

1.2 decodedBodySize值为0

一开始测试的时候用的是图床照片地址，发现decodedBodySize、encodedBodySize、transferSize全是0，查了下，解释是资源可能是跨源请求，要公开跨源内容大小信息，需要设置 Timing-Allow-Origin HTTP 响应标头。
响应头Timing-Allow-Origin用于指定特定站点，以允许其访问Resource Timing API提供的相关信息，否则这些信息会由于跨源限制将被报告为零
只有设置了该响应头的资源，才能被指定域名的脚本进行performance的相关检测。

摘自https://segmentfault.com/a/1190000021422101

测试的时候发现，decodedBodySize和照片实际大小略有差异，不到1K的差异，不确定是不是问题，但功能应该是够用的。

2 利用请求，转blob

每个图片还要再单独请求一次，我感觉效率可能会有点低。
（img标签显示图片的时候会有一次请求，判断大小的时候又发送了一次）

2.1代码

// 注意blob()是异步操作
const fileImg = await fetch(imgUrl).then(r => r.blob());
cosnole.log(fileImg )
// fileImg.size是图片大小

// 另一种写法
fetch(imgUrl).then(async r => {
    const blob = await r.blob();
    console.log(blob)
    // blob.size是图片大小
})

// 换一种请求方法
const x = new XMLHttpRequest();
x.open('GET', imgUrl, true);
x.responseType = "blob";
x.onload = () => {
    console.log(x.response)
    // x.response.size是图片大小
}
x.send();

// 使用arraybuffer类型
const x = new XMLHttpRequest();
x.open('GET', imgList[0].src, true);
x.responseType = "arraybuffer";
x.onload = () => {
    console.log(x.response);
    // x.response.byteLength是图片大小
}
x.send();

3 canvas.toBlob

这个方法貌似有误差，误差貌似还比方法1大，也不如方法1方便，仅供参考

const img = new Image();
img.onload = async () => {
    // 生成canvas画布
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 设置canvas宽高，需要设置原图宽高
    canvas.width = img.width;
    canvas.height = img.height;
    // 绘制图片
    ctx.drawImage(imgList[0], 0, 0);
    // 转blob，注意是异步的，blob第二个、第三个参数也要带上
    canvas.toBlob(async blob => {
        console.log(blob)
    }, "image/jpeg", 1)
}
img.src = imgList[0].src;