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中的constructor和prototype
Apr 07 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
创建一个类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
提问的智慧(2)
2006/10/09 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php实现加减法验证码代码
2014/02/14 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
python与C互相调用的方法详解
2017/07/14 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
windows下python安装pip图文教程
2018/05/25 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
法学专业个人求职信
2013/09/26 职场文书
优秀教师先进事迹
2014/01/22 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android