澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-08-31 12:04 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

威尼斯官方网站Js获取图片原始宽高的实现代码,

本文实例陈说了JavaScript轻松获得页面图片原始尺寸的不二秘籍。分享给大家供我们参照他事他说加以考察,具体如下:

诚如拿走图片高度大幅度的写法:

万一大家页面看到的图形都是缩略图,那就需求做个图片点击放大效应,那么怎样获得图片的本来宽高呢?方法如下:

此间通过Image()对象获得原始宽高

复制代码 代码如下:

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

这种形式就从未那么勤奋,直接new多个Image()对象,然后把img的src赋值给他就能够得到。

var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

以上那篇Js获取图片原始宽高的贯彻代码正是小编分享给我们的全部内容了,希望能给大家一个参照他事他说加以考察,也指望我们多多帮助脚本之家。

var img = new Image();
img.src = $("#target").attr("src");
if(img.complete){
  alert('width:' img.width ',height' img.height);
  img = null;
}else{
  img.onload = function(){
    alert('width:' img.width ',height' img.height);
    img = null;
  };
}

但chrome中测验 无法获得到。img.width, img.height都为0

你或许感兴趣的篇章:

  • 应用js获取图片原始尺寸
  • JavaScript得到图片的原始尺寸以大幅度为例
  • JavaScript简单获得页面图片原始尺寸的艺术
  • JS获取图片中度急剧的方法分享
  • js和jquery如何获取图片真实的增加率和中度
  • JavaScript 动态更换图片大小
  • js 加载时自动调节图片大小
  • JS自动裁减高出大小的图纸
  • JS检查评定图片大小的实例
  • Javascript获得图片原始宽度和冲天的主意详解

并且不要忧虑new Image对象会多多个http诉求,浏览器加载图片后一度有缓存,你new N个image对象都没难点,当然,内存会消耗,所以用完后img置为null。

由来:当图片不是本土图片,而是互联网图片
onload 在功成名就地装载了图像时调用的事件管理程序。

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:威尼斯官方网站Js获取图片原始宽高的实现代码,

关键词: 澳门威利斯人