html5中新属性naturalWidth/naturalHeight的用法

jiekechoo 发布于2019-08-22 10:45 / 1050人阅读

摘要：简介和是新增的属性，它们可以直接获取图片的原始宽高。结果可以使用和去获取图片的原始尺寸，考虑的兼容问题，可以采用去获得图片的原始尺寸代码如下使用该方法可以获取图片的原始尺寸，通常在图片放大缩小，动态生成图片处需要用到该方法

简介

naturalWidth和naturalHeight是html5新增的属性，它们可以直接获取图片的原始宽高。而且这在Fixefox/Chrome/Safari/Opera/IE9里已经实现。

看看naturalWidth和naturalHeight在各大浏览器中兼容性如下：

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

原因

页面中的img元素想要获取图片的原始尺寸通常使用innerWidths属性或者使用jQuery的width()方法，
但是如果给图片添加了width样式，那么用innerWidth或width()获得宽度是不是你想要的，因为innerWidth或width()获取的是元素盒模型的实际渲染的宽度，而不是图片的原始宽度。

结果

可以使用naturalWidth和naturalHeight去获取图片的原始尺寸，考虑的兼容问题，可以采用new Image()去获得图片的原始尺寸：
代码如下：

function  getNaturalSize(img){
        var naturalSize ={};
        if(window.naturalWidth && window.naturalHeight){
            naturalSize.width = img.width;
                naturalSize.height = img.height;
        }else{
            var image = new Image();
            image.src = img.src;
            naturalSize.width = image.width;
            naturalSize.height = image.height;
        }
        return naturalSize;
    }

使用该方法可以获取图片的原始尺寸，通常在图片放大缩小，动态生成图片处需要用到该方法！

GPU云服务器云服务器 html5的属性 html5的文字属性 html5的一些属性 html5 画布用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91192.html

puppeteer 多URL爬取

摘要：基本使用返回的是一个集合需要重新遍历为了显示的图片引入了原尺寸为的图片顺序不能变启动打开监听事件跳转页面关闭顺序改变监听事件将无法监听多个的使用方法爬取数组上的所有图片，并返回其真实宽高此方法大致参考了上的答案基本使用 use strict; const puppeteer = require(puppeteer); (async () => { const browser =...

focusj 2019-08-23 17:06 评论0 收藏0
翻译：HTML5与HTML4的区别

摘要：但由于翻译时草稿只发布了不到二十天，本文有很好的时效性。语法中同时定义了解析规则包括异常的处理方式。语法要求声明，以确保浏览器以标准模式渲染页面。语法中的声明为，不区分大小写。此外，仅允许一些标签上的属性设置。本文选译自：W3C Working Group Note: HTML5 Differences from HTML4。解释一下W3C Working Group Note，...

Null 2019-08-01 14:44 评论0 收藏0
FineReport中如何安装移动端H5插件

摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 评论0 收藏0