Js获取图片原始宽高的实现代码


Posted in Javascript onMay 17, 2016

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

//获取图片原始宽度
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>"
});
});
});

以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
Vue如何实现组件间通信
May 15 Vue.js
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 #Javascript
You might like
解析PHP的session过期设置
2013/06/29 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php二维码生成
2015/10/19 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python实现朴素贝叶斯算法
2018/11/19 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
django的csrf实现过程详解
2019/07/26 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
如何清空python的变量
2020/07/05 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
物流仓管员工作职责
2014/01/06 职场文书
公积金单位接收函
2014/01/11 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技