Javascript获取图片原始宽度和高度的方法详解

前言

网上关于利用Javascript获取图片原始宽度和高度的方法有很多，本文将再次给大家谈谈这个问题，或许会对一些人能有所帮助。

方法详解

页面中的img元素，想要获取它的原始尺寸，以宽度为例，可能首先想到的是元素的innerWidth属性，或者jQuery中的width()方法。

如下：

<img id="img" src="1.jpg">

<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

这样貌似可以拿到图片的尺寸。

但是如果给img元素增加了width属性，比如图片实际宽度是600，设置了width为400。这时候innerWidth为400，而不是600。显然，用innerWidth获取图片原始尺寸是不靠谱的。

这是因为 innerWidth属性获取的是元素盒模型的实际渲染的宽度，而不是图片的原始宽度。

<img id="img" src="1.jpg" width="400">

<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

jQuery的width()方法在底层调用的是innerWidth属性，所以width()方法获取的宽度也不是图片的原始宽度。

那么该怎么获取img元素的原始宽度呢？

naturalWidth / naturalHeight

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。

如下：

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

naturalWidth / naturalHeight在各大浏览器中的兼容性如下：

图片截取自：http://caniuse.com/#search=naturalWidth

所以，如果不考虑兼容至IE8的，可以放心使用naturalWidth / naturalHeight属性了。

IE7/8中的兼容性实现：

在IE8及以前版本的浏览器并不支持naturalWidth和naturalHeight属性。

在IE7/8中，我们可以采用new Image()的方式来获取图片的原始尺寸，如下：

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}

// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

IE7+浏览器都能兼容的函数封装：

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}

// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

总结

以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助。如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • 谈谈对JavaScript原生拖放的深入理解

    前面的话 拖放(drag-and-drop,DnD)其实是两个动作--拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动 图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false [注意]必须设置draggable='true'才能生效,只设置dra

  • 使用java实现LIS算法,出操队形的问题

    假设有序列:2,1,3,5,求一个最长上升子序列就是2,3,5或者1,3,5,长度都为3. LIS算法的思想是: 设存在序列a. ① 如果只有一个元素,那么最长上升子序列的长度为1: ② 如果有两个元素,那么如果a[1]>a[0],则最长上升子序列的长度为2,a[1]为该最长上升子序列的最后一个元素;若a[1]<a[0],则最长上升子序列的长度为1,a[0]和a[1]均为  其最长上升子序列的最后一个元素. ③ 如果由三个元素,那么如果a[2]>a[0],a[2]>a[1],则a[

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • javascript实现的左右无缝滚动效果

    本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &

  • Java 是如何读取和写入浏览器Cookies的实例详解

    Java 是如何读取和写入浏览器Cookies的实例详解

    首先我们认识下什么是cookies: cookie实际上是一个存在你硬盘里的数据,但是这些数据很特殊,只能由web应用提交给浏览器帮助存储,并且我们还能读取浏览器的cookie web应用一般只在cookie中存储一些用户信息等少量且暂时的数据,数据量大则不适合存储在cookies 一般浏览器对于每个web应用会分别给予他们40个cookie用来存储数据,并且每个cookie的大小不超过4K(听说部分浏览器的cookie能存很大的数据,不过我们一般不会存这么大的数据,因为数据提取的效率不高,影响

  • javascript cookie用法基础教程(概念,设置,读取及删除)

    本文实例讲述了javascript cookie用法.分享给大家供大家参考,具体如下: 一.什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. 二.cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间 三.如何使用 cookie? 通过 document.cookie 来写入 cookie <!DOCTYPE HTML> <html lang="en-US"&

  • 在Java下利用log4j记录日志的方法

    1.前言 log4j是一个用Java编写的可靠,快速和灵活的日志框架(API),它在Apache软件许可下发布. Log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中. Log4j是高度可配置的,并可通过在运行时的外部文件配置.它根据记录的优先级别,并提供机制,以指示记录信息到许多的目的地,例如:数据库,文件,控制台,UNIX系统日志等. Log4j中有三个主要组成部分: loggers: 负责捕获记录信息. appenders : 负责发布日志信息,以不同的首选目

  • javascript实现的上下无缝滚动效果

    本文实例讲述了javascript实现的上下无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动--上下的效果.其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚

  • Javascript获取图片原始宽度和高度的方法详解

    Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img

  • javascript获取图片的top N主色值方法详解

    javascript获取图片的top N主色值方法详解

    题目要求 找出一个页面中出现次数最多的标签!!! 个人解法: var eles = document.getElementsByTagName('*'); var rs = []; for(var i=0; i<eles.length; i++) { var tag_name = eles[i].tagName.toLowerCase(); if(undefined != tag_name) { if(inJsonArray(rs, tag_name)) { addWeight(rs, tag_

  • JavaScript实现网页带动画返回顶部的方法详解

    服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=

  • JavaScript动画实例之粒子文本的实现方法详解

    1．粒子文本的实现原理 粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子. 先在canvas1中用如下的语句绘制待显示的文本. ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canva

  • 对Xpath 获取子标签下所有文本的方法详解

    在爬虫中遇见这种怎么办 想提取名称, 但是 名称不在一个标签里 使用xpath string()方法 例如 data.xpath("string(path)") path -- 你xpath提取的路径 这里提取到父标签 string() 方法会提取子标签多有的文本内容. 以上这篇对Xpath 获取子标签下所有文本的方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JavaScript实现生成动态表格和动态效果的方法详解

    JavaScript实现生成动态表格和动态效果的方法详解

    今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">

  • Javaweb中Request获取表单数据的四种方法详解

    Javaweb中Request获取表单数据的四种方法详解

    目录 表单代码 request.getParamter(String name);通过name获取值 request.getParamterValues(String name);通过name获取value值(一般用于复选框获取值) 代码片段 request.getParameterNames();直接获取表单所有对象的name值,返回值是枚举集合 request.getParameterMap();直接获取表单所有对象的name值以及数据 表单代码 <!DOCTYPE html> <h

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • SpringMVC中MultipartFile上传获取图片的宽度和高度详解

    SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":"application/msword" ".jpg":"image/jpeg" ".jpeg":"image/jpeg" ".png":"image/png" -. 有时

  • JavaScript前端图片加载管理器imagepool使用详解

    JavaScript前端图片加载管理器imagepool使用详解

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

随机推荐