vue 如何获取图片的原图尺寸_js获取图片信息(一)-----获取图片的原始尺寸
如何获取图片的原始尺寸大小?
如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢?
#oImg{
width: 100px;
height: 100px;
}
方法一:
HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。
w = document.getElementsByTagName("img")[0].naturalWidth;
h= document.getElementsByTagName("img")[0].naturalHeight;
console.log(w+ ' ' + h);
打印出来的结果与原始尺寸相符。但有个前提是,必须在图片完全下载到客户端浏览器才能判断。
如果是不支持的版本浏览器,那可以用传统方法判断,如下:
var img = document.getElementById("oImg"),
w,h;if(oImg.naturalWidth) {//HTML5 browsers
w =oImg.naturalWidth;
h=oImg.naturalHeight;
}else{//IE 6/7/8
var nImg = newImage();//nImg.src = oImg.src;
nImg.onload =function () {
w=nImg.width;
h=nImg.height;
console.log(w+ " " +h)
}
nImg.src=oImg.src;
}
此时为什么要加 onload 的原因是,图片可能没加载完成,导致图片的 width 、height 无法获取到。
这里还有有个点要注意, nImg.src = oImg.src 这段代码为什么要放在 nImg.onload 函数后面? 这样做是为了兼容 ie 。ie 除了第一次加载图片时候获取正常,之后再刷新就没有反应了。其他大部分浏览器获取正常。这是什么原因呢?
原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于大部分浏览器,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而 ie 则忽略了这种同一性,不会引起图片的onload事件。。。一般情况下,可以用 complete 来判断图片是否加载完毕。对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为true ,否则一直是false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!可以写如下的函数来做到各个浏览器中预加载图片的兼容性。如下:
var img = document.getElementById("oImg"),
w,h;if(oImg.naturalWidth) {//HTML5 browsers
w =oImg.naturalWidth;
h=oImg.naturalHeight;
}else{//IE 6/7/8
var nImg = newImage();
nImg.src=oImg.src;if(nImg.complete) { //图片已经存在于浏览器缓存
console.log(nImg.width + " " +nImg.height);
}else{
nImg.οnlοad=function () {
w=nImg.width;
h=nImg.height;
console.log(w+ " " +h);
}
}
}
最后封装成函数,如下:
function getImgNaturalDimensions(oImg, callback) {varnWidth, nHeight;if (!oImg.naturalWidth) { //现代浏览器
nWidth=oImg.naturalWidth;
nHeight=oImg.naturalHeight;
callback({w: nWidth, h:nHeight});
}else { //IE6/7/8
var nImg = newImage();
nImg.οnlοad=function() {var nWidth =nImg.width,
nHeight=nImg.height;
callback({w: nWidth, h:nHeight});
}
nImg.src=oImg.src;
}
}
var img = document.getElementById("oImg");
getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
});
方法二:(图片不需要再页面中展示)
将 img 放在页面中不可见的位置上,缺点是:这种方法需要浏览器加载这张图片
.imgbox{//img 盒子
width:0;
overflow: hidden;
}
然后在去取图片宽高等信息:
function getImgNaturalDimensions2(oImg) {varnWidth, nHeight;if (!oImg.naturalWidth) { //现代浏览器nWidth=oImg.naturalWidth;
nHeight=oImg.naturalHeight;return({w: nWidth, h:nHeight});
}else { //IE6/7/8
nWidth =oImg.width;
nHeight=oImg.height;return({w: nWidth, h:nHeight});
}
}var getImg =getImgNaturalDimensions2(img);
console.log(getImg)
然而,到这里,是不是万事大吉了呢?答案当然是否定的。
你用这种方法做后,会发现你有时可以取得 img 的 width、height ,但有时会是个 0。原因见下节分析。
我们先看如何正常去取吧!
var img = document.getElementById("oImg");
img.οnlοad=function(){//方法一
getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
});//方法二
var getImg =getImgNaturalDimensions2(img);
console.log(getImg);
}
只需在 img.onload 函数内去调用函数。
vue 如何获取图片的原图尺寸_js获取图片信息(一)-----获取图片的原始尺寸相关推荐
- 如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
- jquery 获取某个值得键名_js:数组里面获取键名和键值
在写php时用ajax异步传回的返回数组时是json格式,在js里面处理时有时需要用到键名,此时可以用in来处理 js只有数字索引: var data = new array("你" ...
- matlab 复制图形,[MATLAB] copy figure到word如何设定图片的原始尺寸(二)
目标 本文所要讲述是方法是通过代码来实现对Figure尺寸的精确控制,使得不需要再手动调节Figure尺寸大小,保证直接在Figure窗口菜单中通过Copy Figure复制到Word中的图片尺寸为代 ...
- vue 如何获取图片的原图尺寸_阳台洗衣机组合柜如何设计|尺寸规范|案例图片...
对于阳台装洗衣机来说,不只是简单的装修,还需要我们考虑水电.尺寸以及美观实用等问题,以免后期出现问题的时候会更加麻烦.接下来深圳装修网小编就为你们带来阳台洗衣机组合柜的案例赏析,以及装修的尺寸规范等内 ...
- 微信小程序,画布中,根据需要展示的图片比例,获取能截取原图中的最大图片尺寸,并且不变形展示
在微信小程序中,想要做一个分享海报,就需要用到画布,在画布上绘制图片时就会遇到图片变形的情况,下面我会给出我的解决办法. 先画个图片意思意思下: 1. 先根据传入图片地址获取原图片的尺寸: // 获取 ...
- JavaScript获取图片的原始尺寸
转至https://www.cnblogs.com/snandy/p/3704218.html 页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 1 2 3 4 ...
- javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
- 安卓获取res下的资源文件:string字符串、color颜色、dimen尺寸、array数组、drawable图片和xml、anim/animator动画、raw媒体、assets资源
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解 安卓获取内部资源并应用. 1.获取res/values文件夹下的string.xml的字符串.color.xml的颜色.dimen.xml的尺寸.ar ...
- vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片 首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码 重点就是:style="{background: ...
最新文章
- .net 转换任意类型不报错
- 前端代码规范-CSS
- FFmpegMediaMetadataRetriever-native.aar
- 【面试必备】java实现下载文件
- 【Android 安装包优化】使用 lib7zr.a 静态库处理压缩文件 ( 交叉编译 lib7zr.a 静态库 | 安卓工程导入静态库 | 配置 CMakeLists.txt 构建脚本 )
- 不等号属于不等式吗_初中数学——中考知识3【方程与不等式(基础)】
- mysql数据库套件_MySQL数据库管理开发套件(EMS SQL Management Studio For MySQL)下载 v1.3.0.46170 官方版 - 比克尔下载...
- java 实现类似于python requests包的Session类,自动管理cookie。
- 该内存不能为read
- zynq中纯Programmable Loigc编程
- 你最缺钱的时候是怎么度过的?
- flash文件怎么打开 怎么将swf格式转换成avi视频
- 使用spreadjs vue版本
- STM32CbueMX之W25Q256
- 点击电脑版微信一直打不开解决方案
- 安排座位 java_如何安排领导座次
- USTC English Club20171010
- 使用 CSS 追踪用户
- 32岁,我从公司离职了,是裸辞......
- 读,写,删,复集合脚本
热门文章
- x%3e=y%3e=z的c语言表达式,我的C语学习笔记-C语言教程(三).doc
- 一款不错的手机端视频剪辑软件
- Dline,一款让你爱不释手的去中心化社交应用
- P1129 矩阵游戏
- Oracle 数据库12c 新特性总结
- 计算机不断自动重启,电脑不断自动重启怎么办?
- 《Adobe Premiere Pro CS6中文版经典教程》——1.3 扩展工作流
- html怎样调节字间距,css怎么调整字间距?
- DB2 PC服务器本地磁盘集群部署模式简介
- BeanUtils.populate的用法