Js获取图片原始宽高

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下:

//获取图片原始宽度
function getNaturalWidthAndHeight(img) {
var image = new Image();
image.src = img.src;
return [image.width,image.height];
}

//点击缩略图弹出层,显示原始图片。

//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_box p>img").each(function (k, v) {
$(this).unbind("click"); //解除绑定,防止弹出多次图片层。
$(this).click(function () {
var img = v; //图片对象
var imgArea = getNaturalWidthAndHeight(img);
var layerWidth = imgArea[0]+ 5;
if (layerWidth > 1080) {
layerWidth = 1080;
}
var layerHeight = imgArea[1] + 5;
if (layerHeight > 600) {
layerHeight = 600;
}

//layer弹出层插件
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: [‘‘+layerWidth+‘px‘, ‘‘ + layerHeight + ‘px‘],
skin: ‘layui-layer-nobg‘, //没有背景色
shadeClose: true,
closeBtn: 1, //显示关闭按钮
content: "<center><img src=‘" + $(this).attr("src") + "‘></center>"
});
});
});

时间: 2024-09-30 06:33:28

Js获取图片原始宽高的相关文章

js判断图片加载完成后获取图片实际宽高

通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg" id="test" width="250px"

前端 JS 获取 Image 图像 宽高 尺寸

前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在图片数量较多的时候,这样的获取效率实在是低下.所有就有了这篇文章.通过直接读取解析文件的字节码来获取图片的尺寸. IMAGE_HEAD_SIGS var IMAGE_HEAD_SIGS = { GIF: [0x47, 0x49, 0x46], //'G' 'I' 'F' ascii PNG: [0x

根据图片的链接获取图片的宽高

//根据图片的链接获取图片的宽高 - (CGSize)downloadImageSizeWithURL:(id)imageURL { NSURL *URL = nil; if([imageURL isKindOfClass:[NSURL class]]){ URL = imageURL; } if([imageURL isKindOfClass:[NSString class]]){ URL = [NSURL URLWithString:imageURL]; } if(URL == nil) r

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

根据图片url地址获取图片的宽高

1 /** 2 * 根据img获取图片的宽高 3 * @param img 图片地址 4 * @return 图片的对象,对象中图片的真实宽高 5 */ 6 public BufferedImage getBufferedImage(String imgurl) { 7 URL url = null; 8 InputStream is = null; 9 BufferedImage img = null; 10 try { 11 url = new URL(imgurl); 12 HttpURL

在onload事件前获取图片的宽高

有时候在获取从后台的图片时,要对图片进行一系列的处理,才渲染出来 我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高,接下来上代码 通过定时循环检测获取: // 记录当前时间戳 var start_time = new Date().getTime() // 图片地址 后面加时间戳是为了避免缓存 var cutSrc = window.ctx + '/touchsys/terminal/showCapture?terminalId=' + terminalId + '×t

js获取图片原始尺寸

如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src="images/test.jpg" id="oImg" alt=""> HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高.这两个属性在Firefox/Chrome/Safari/

js获取图片原始大小

摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=&quo

js获取屏幕元素宽高值

屏幕分辨率的宽高:window.screen.width  / window.screen.height 屏幕可用工作区宽高:window.screen.availWidth / window.screen.availHeight 网页可见区域宽高:document.body.clientWidth / document.body.clientHeight 网页可见区域宽高:document.body.offsetWidth / document.body.offsetHeight(包括边线)