JavaScript 获取图片尺寸和字节大小 |
您所在的位置：网站首页 › js图片大小调整 › JavaScript 获取图片尺寸和字节大小 |
|
今天需要使用 JS 获取网络图片的尺寸大小，然后 Google 了一大圈找到的都是获取宽高的，好吧，也可能是我搜索的方式不对，还好凭着我的聪明才智最终自己琢磨出了方法，下面总结下。 本地图片 网络图片 本地图片 字节大小 本地图片是比较简单的，使用 File Api 即可 123456789document.getElementById("file").addEventListener("change", selectFile, false);function selectFile(e) { var files = e.target.files; console.log(files[i].size);}试一试 宽高 需要使用 FileReader 来宽高 dataurl，然后使用 Image 来获取宽高。 12345678910111213141516171819202122document.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);}试一试 网络图片字节大小 通过 fetch 请求获取字节大小，在这里获取头信息 Content-Length 为空，需要使用 blob 数据中的 size。 123456789101112 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'试一试 宽高 只需要使用 Image 即可123456789101112var 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' 试一试 最近更新 Alfred Workflow 命令行帮助工具 最近热读 Go 判断数组中是否包含某个 item Vim 高级功能 vimgrep 全局搜索文件 办理北京工作居住证的一些细节 Go 语法错误：Non-declaration statement outside function body Mac 电脑查看字体文件位置 扫码关注公众号，或搜索公众号“温欣爸比” 及时获取我的最新文章 赏谢谢你请我喝咖啡 支付宝 微信 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |