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();
相关文章
|
4天前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
91 1
|
8月前
|
JavaScript 前端开发 算法
vue上传图片并修改png图片颜色
当涉及到在 Vue 中上传图片并修改 PNG 图片的颜色时,这个任务涵盖了文件上传、图像处理、Canvas 操作等多个方面 在现代 Web 开发中,图片的处理是常见的需求之一。本文将带您深入探讨如何使用 Vue.js 来实现图片上传,并在客户端使用 Canvas 来修改 PNG 图片的颜色。
132 0
vue上传图片并修改png图片颜色
|
10月前
|
JavaScript 前端开发
图片转base64、判断图片大小、图片压缩、图片上传
文章主要介绍 `js` 实现压缩上传图片转base64,其他的框架(如React、Vue、Angular)也可借此参考。**这个方法真实可用,已在实际项目中运行**。
193 0
|
JavaScript
vue裁剪gif图片并保持动画效果
vue裁剪gif图片并保持动画效果
149 0
vue裁剪gif图片并保持动画效果
|
移动开发 JavaScript HTML5
JS获取img图片的原始尺寸高度和宽度
JS获取img图片的原始尺寸高度和宽度
465 0
JS获取img图片的原始尺寸高度和宽度
|
存储 JavaScript 前端开发
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
整体列表通过拉取腾讯云COS文件桶信息,同时图片需要展示像素信息
jquery scroll 滚动加载列表 获取腾讯云图片像素信息
|
JavaScript
JQuery超简单实现等比例缩放图片大小(收藏)
当页面加载的图片中含有属性width和height值,则可以使用几句简单的jQuery代码实现等比例缩放,也可以通过JQ内置函数来获图片取宽高。
328 0
|
Web App开发 移动开发 前端开发
把canvas标签里的图像下载成本地图片文件
把canvas标签里的图像下载成本地图片文件
498 0
把canvas标签里的图像下载成本地图片文件
|
容器
使用vue-cropper裁剪正方形上传头像
引用方式 在组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import VueCropper from 'vue-cropper' Vue.
3633 0
|
定位技术
openlayers加载图片图层png,jpeg等
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/80479536 原文:http://www.
1445 0