naturalWidth 与 naturalHeight

在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性(图片原始大小)，分别为
naturalWidth 和naturalHeight属性，例子如下：

注意问题：
- 图片没有加载的时候值为0，0
- 与img 设置的width 和height 无关，是图片的原始大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="../base/jquery.js"></script>
</head>
<body>
<img width="200" height="125"src="//www.baidu.com/img/baidu.gif"id="abc"><script>$(function () {$("#abc").on("load", function () {//jquery写法var imgW = $("#abc")[0].naturalWidth;var imgH = $("#abc")[0].naturalHeight;//javascript写法var imgW = myimage.naturalWidth; var imgH = myimage.naturalHeight; alert("原始大小:宽：" + imgW + "高：" + imgH);var imgWidth = $("#abc")[0].width;var imgHeight = $("#abc")[0].height;alert("显示: 宽：" + imgWidth + "高：" + imgHeight);})})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lvyeconghua/p/8318672.html

naturalWidth 与 naturalHeight相关推荐

HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放旋转裁剪图片 Image Cropper ...
如何在Tensorflow.js中处理MNIST图像数据
by Kevin Scott 凯文·斯科特(Kevin Scott) 如何在Tensorflow.js中处理MNIST图像数据 (How to deal with MNIST image data i ...
教你两种python selenium保存图片的方法
大家好,本篇文章主要讲的是python selenium保存图片最好的两种方法,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下 selenium爬取页面时经常遇到要保存图片的需求,通常的做法是 ...
HTML5上传图片，后台使用java
2019独角兽企业重金招聘Python工程师标准>>> 1.html代码引用的js如下: <script src="${base_path}/view/html/j ...
怎样实现前端裁剪上传图片功能
怎样实现前端裁剪上传图片功能由于前端是不能直接操作本地文件的,要么通过<input type="file">用户点击选择文件或者拖拽的方式,要么使用flash等第三方 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
canvas 实现图片局部模糊_JavaScript中的图片处理与合成(四)
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
详解exif.js，应用于canvas照片倒转（海报H5）
业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...
HTML5与HTML4的区别（译文）
2019独角兽企业重金招聘Python工程师标准>>> 本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一 ...

naturalWidth 与 naturalHeight

naturalWidth 与 naturalHeight相关推荐

最新文章

热门文章