获取图片实际渲染的宽度、高度与图片原始的宽度和高度

  在写页面时经常会遇到需要获取图片的宽度、高度等情况。然而以前总是获取的是图片实际渲染的宽度和高度,也就是你用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="width: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,这时需要让图片完全载入后才可以获取其宽高。

  

时间: 2024-11-07 12:22:45

获取图片实际渲染的宽度、高度与图片原始的宽度和高度的相关文章

Swift图片原色渲染

public class HuaUtilitityImage: NSObject { // 普通渲染 public func renderingImageWithTintColor(image: UIImage?,_ tintColor: UIColor) -> UIImage?{ return renderingImageWithThintColor(image, tintColor, CGBlendMode.DestinationIn) } // 渐变渲染 public func rende

未知高度的图片垂直居中

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>未知高度的图片垂直居中</title> 6 <meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563"> 7 <style>

浏览器渲染的工作流程和图片加载与渲染规则

1 浏览器渲染的工作流程 浏览器的工作原理.以Webkit引擎的工作流程为例,浏览器加载一个HTML页面后进行如下操作 解析HTML[遇到<img>标签加载图片] -> 构建DOM树 加载样式 -> 解析样式[遇到背景图片链接不加载] -> 构建样式规则树 加载javascript -> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树[加载渲染树上的背景图片] 计算元素位置进行布局 绘制[开始渲染图片] 2 图片加载与渲染规则  页面中不是所有的&l

通过 ffmpeg 获取视频第一帧(指定时间)图片

最近做一个上传教学视频的方法,上传视频的同时需要上传视频缩略图,为了避免用户上传的缩略图与视频内容不符,经理要求直接从上传的视频中截图视频的某一帧作为缩略图,并给我推荐了FFMPEG.FFMPEG 功能很强大,做视频必备的软件. FFMPEG下载地址:https://ffmpeg.org/download.html 1.VideoThumbTaker.java 获取视频指定播放时间的图片 package video;import java.io.IOException;import java.i

获取后台富文本框内容,截取图片

1.split()  分割字符串,转化成数组 (1)分割数据中有某段字符串的数据 ,转化成数组 //拿取富文本框中的图片var div=data[0].text.split("/agriculture/uploads/");//定义一个变量存放字符串数据 var divstr="";//循环div的长度 for(var k=0;k<div.length;k++){ if(k==0){ //第一个k是字符串,文本内容 divstr+=div[k]; }else{

C# 压缩图片到指定宽度,假如图片小于指定宽度 判断图片大小是否大于指定大小(KB) 如果大于则压缩图片质量 宽高不变

class Program { static void Main(string[] args) {//G:\zhyue\backup\projects\Test\ConsoleApplication1\img //var url = "http://seo.jrechina.com/houselist/"; //var res = WebRequestExt.GetData(url); string img_url = @"D:\Documents\Pictures\壁纸\1

一个iOS图片选择器的DEMO(实现图片添加,宫格排列,图片长按删除,以及图片替换等功能)

在开发中,经常用到选择多张图片进行上传或作其他处理等等,以下DEMO满足了此功能中的大部分功能,可直接使用到项目中. 主要功能如下: 1,图片九宫格排列(可自动设置) 2,图片长按抖动(仿苹果软件删除时,图标抖动效果),可进入删除状态,再次单击进入普通状态 3,图片设置最大上限,加号按钮自动隐藏 4,已选图片可单击进行重新选择 5,无需代理,直接调用对应属性就可获取所有图片,并与显示顺序保持一致 效果图如下: 1 // 2 // SZAddImage.h 3 // addImage 4 // 5

当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来

1.layer层代码: 1 <div class="bg-layer" ref="layer"></div> 2.在mounted()的时候,获取图片的高度,并获得其滚动最小高度,即图片的高度-预留的高度: 1 mounted(){//因为上面的背景图的高度是和宽度保持着10:7的比例,因此,不同浏览器下高度不一样,下面的song-list高度也不一样,需要计算得出: 2 this.imageHeight = this.$refs.bgIma

iOS开发Quzrtz2D 十:圆形图片的绘制以及加边框圆形图片的绘制

一:圆形图片的绘制 @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageV; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; /** * UIBezierPath:绘制路径,就是根据路径对图形上下文进行构造 */ //0.加载图片 UIImage *image = [UII