JQ获取图片的实际尺寸

简介: JQ获取图片的实际尺寸

在实际情况中我们设置了图片大小,比如我们设置了 400 300 但实际的图片大小是 1300 1000 那我们怎么获取这个实际的大小呢。

在原生js 中可以通过  
   nWidth = document.getElementById('example').naturalWidth,
   nHeight = document.getElementById('example').naturalHeight;

在JQ 中可以通过封装natural来实现

(function($){
var props = ['Width', 'Height'],
        prop;
while (prop = props.pop()) {
        (function (natural, prop) {
            $.fn[natural] = (natural in new Image()) ? 
function () {
return this[0][natural];
            } : 
function () {
var node = this[0],
                    img,
                    value;
if (node.tagName.toLowerCase() === 'img') {
                    img = new Image();
                    img.src = node.src,
                    value = img[prop];
                }
return value;
            };
        }('natural' + prop, prop.toLowerCase()));
    }
}(jQuery));

使用方法:

$("#a").naturalWidth();
$("#a").naturalHeight();
相关文章
|
前端开发
canvas生成自定义大小图片
canvas生成自定义大小图片
|
4月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
98 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
5月前
根据图片获取图片中最多的颜色
根据图片获取图片中最多的颜色
|
7月前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
161 1
|
JavaScript 前端开发
图片转base64、判断图片大小、图片压缩、图片上传
文章主要介绍 `js` 实现压缩上传图片转base64,其他的框架(如React、Vue、Angular)也可借此参考。**这个方法真实可用,已在实际项目中运行**。
329 0
|
C# 图形学
C#裁剪图片的方法
C#裁剪图片的方法
334 0
ckeditor 3.6.2版本,设置图片上传后自适应宽高。
ckeditor 3.6.2版本,设置图片上传后自适应宽高。
180 0
|
移动开发 JavaScript HTML5
JS获取img图片的原始尺寸高度和宽度
JS获取img图片的原始尺寸高度和宽度
554 0
JS获取img图片的原始尺寸高度和宽度
|
存储 编解码 前端开发
input上传图片并同步获取图片分辨率
🎈作为一名前端开发,页面交互少不了图片上传,但有时候我们需要对上传图片做一些限制,如尺寸要求和像素分辨率要求,所以这里我们一起来看看前端上传图片如何获取图片的分辨率。
412 0
|
存储 JavaScript 前端开发
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
整体列表通过拉取腾讯云COS文件桶信息,同时图片需要展示像素信息
jquery scroll 滚动加载列表 获取腾讯云图片像素信息