zoukankan      html  css  js  c++  java
  • 获取图片实际渲染的宽度、高度与图片原始的宽度和高度

      在写页面时经常会遇到需要获取图片的宽度、高度等情况。然而以前总是获取的是图片实际渲染的宽度和高度,也就是你用css或js设置后的图片的宽度和高度,并不是图片原始的尺寸。今天突然遇到这个问题,一时之间不知如何做,查了下资料,自己摸索了一下。特此总结一下。

      例如。有这样一张图片,代码如下:  

    <img src="创建ajax的过程.png" alt="" >

      1、获取图片渲染的宽度和高度(可用js或jQuery实现)。

      (1)、使用js获取图片实际渲染的宽度、高度。

      这里也有两种方式:

      一种是: document.getElementsByTagName("img")[0].width   // 获取实际渲染宽度    document.getElementsByTagName("img")[0].height  // 获取实际渲染高度

      另一种: document.getElementsByTagName("img")[0].offsetWidth  // 获取实际渲染宽度  document.getElementsByTagName("img")[0].offsetHeight // 获取实际渲染高度

      (2)、使用jQuery·获取图片实际渲染宽度和高度。

       $("img").width()  // 获取实际渲染宽度  

       $("img").height()  // 获取实际渲染高度

      

      然而当我们通过css或者js重新设置了图片的宽度和高度后,再用上述方法并不能获取图片的原始尺寸,它获取的是图片实际渲染的宽度和高度,为了达到目的,我们需要使用下面这种方法。

      2、获取图片原始的尺寸,也就是无论你是否用css、js设置过图片的宽度、高度,始终获取的是图片的原始尺寸。

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

      直接就是 document.getElementsByTagName("img")[0].naturalWidth   document.getElementsByTagName("img")[0].naturalHeight 

      由于该属性对于IE8及以下不支持,所以这里需要做一个兼容性处理。

      html代码:

    <img src="完整的http请求过程.png" alt="" style="400px" id="img">

      js代码为:

      <script>
            // 获取图片原始尺寸的兼容性写法。
            window.onload = function(){
                function getNaturalSize (img) {
             if(window.naturalWidth && window.naturalHeight) { naturalWidth = img.naturalWidth; } else { // 兼容IE8及以下版本 var image = new Image(); image.src = img.src; var naturalWidth = image.width; } return naturalWidth; } var natural = document.getElementById('img'); alert(getNaturalSize (natural)); } </script>

      注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。

  • 相关阅读:
    网络编程-进程-1、什么叫进程?
    Python做性能测试-1、Locust基础篇
    网络编程-线程-6、互斥锁解决线程中数据安全问题
    网络编程-线程-5、多个线程共享全局变量造成资源争抢,数据混乱
    网络编程-线程-4、多个线程之间共享全局变量
    网络编程-线程-3、通过继承Thread类创建线程
    网络编程-线程-2、如何查看有多少个线程在运行
    网络编程-线程-1、一张图让你看懂多线程工作原理
    网络编程-多任务,并发,并行--从底层工作原理解释,让你不再傻傻分不清这些到底什么意思
    二、网络编程-socket之TCP协议开发客户端和服务端通信
  • 原文地址:https://www.cnblogs.com/sunjuncoder/p/9895467.html
Copyright © 2011-2022 走看看