php根据图片地址获取图片原始高宽,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: "

});

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

php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码相关推荐

原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
C# 调用高德地图API获取经纬度以及定位，JS获取定位【万字详解附完整代码】
最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了.因为是写的web端,百度地图定位API申请的Appkey需要网址过滤.索性就用高德定位了(有一说 ...
js获取html body的宽度,JS获取元素的宽度和高度
在 JavaScript 中,使用元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的包含边框的宽度和高度:而 clientWidth 和 clientHeight 属 ...
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
html js获取input的值,用JS获取input的输入值
javascript如何获取input的输入值? 第一步先找到这个input元素找到元素有三种方法: document.getElementById("id的名称") docum ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
JS获取/格式化日期（附JS获取昨日、今日、上周、本周、上月、本月方法）
JS中处理日期时间常用Date 对象,故本文将依次按照创建Date对象 -> 获取日期时间 -> 格式化日期时间的顺序进行讲解,且已封装好格式化日期等方法可直接使用.若有不正请多指教. ...
html当前域名,js取得当前url,javascript获取当前页面url值,js获取域名
运行如下: thisDLoc = document.location; thisURL = document.URL; thisHREF = document.location.href; thisS ...
vue 创建图片坐标点_利用vue+fabric.js获取图片坐标，并实现图片拖拽、旋转、拉伸等功能...
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具. ...

php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码

php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码相关推荐

最新文章

热门文章