添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

今天需要使用 JS 获取网络图片的尺寸大小,然后 Google 了一大圈找到的都是获取宽高的,好吧,也可能是我搜索的方式不对,还好凭着我的聪明才智最终自己琢磨出了方法,下面总结下。

本地图片

字节大小

本地图片是比较简单的,使用 File Api 即可

1
2
3
4
5
6
7
8
9
<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>

需要使用 FileReader 来宽高 dataurl ,然后使用 Image 来获取宽高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="file" id = 'file' multiple/><br/>
<script>
document.getElementById("file").addEventListener("change", selectFile, false);

function selectFile(e) {
var files = e.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function(){
console.log(img.width);
console.log(img.height);
};
};
})(f);

reader.readAsDataURL(f);
}
</script>

网络图片

字节大小

通过 fetch 请求获取字节大小,在这里获取头信息 Content-Length 为空,需要使用 blob 数据中的 size。

1
2
3
4
5
6
7
8
9
10
11
12
<span id='output'></span><br/>
<img id="preview" width="300"/>
<script>
fetch('/images/gzjzz2.png').then(function(res){
return res.blob()
}).then(function(data){
document.getElementById("output").innerHTML = `${data.size} bytes`

})
document.getElementById("preview").src = '/images/gzjzz2.png'

</script>

只需要使用 Image 即可

1
2
3
4
5
6
7
8
9
10
11
12
<span id='output'></span><br/>
<img id="preview" width="300"/>
<script>
var img = new Image();
img.src = '/images/gzjzz2.png';
img.onload = function(){
content = `宽:${img.width} 高:${img.height}`
document.getElementById("output").innerHTML = content;
};
document.getElementById("preview").src = '/images/gzjzz2.png'

</script>

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置: jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true