js兼容火狐获取图片宽和高的方法

本文实例讲述了js兼容火狐获取图片宽和高的方法。分享给大家供大家参考。具体实现方法如下：

<!doctype html>
<html>
<head>
<meta content="text/html; charset=GBK" http-equiv="Content-Type" />
<title>获取Image 宽高</title>
</head>
<body>
<script>
function newimage(obj) {
  a = new Image();
  var objectURL = window.URL.createObjectURL(obj.files[0]);
  var img= document.getElementById('img')
 img.src = objectURL;
  a.src = objectURL;
 img.onload=function (){
 alert(img.width);
 alert(img.height);
 }
}
</script>
<input id="idcardfile" type="file" name="idcardfile"
onchange="newimage(this)"/>
<img id="img" style="display: none;">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript获取图片像素颜色并转换为box-shadow显示

    JavaScript获取图片像素颜色并转换为box-shadow显示

    一.原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { va

  • js判断图片加载完成后获取图片实际宽高的方法

    本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

  • JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有: obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getC

  • JS获取图片高度宽度的方法分享

    一般获取图片高度宽度的写法: 复制代码 代码如下: var img = new Image(); img.src = imgsrc; var imgWH = CalcImgTiple(img.width, img.height); 但chrome中测试 无法获取到.img.width, img.height都为0 原因:当图片不是本地图片,而是网络图片 onload 在成功地装载了图像时调用的事件处理程序. 在做web开发,其中有一个需求:利用Javascript获取要加载的图片的尺寸,所以很自

  • js从外部获取图片的实现方法

    图片ping:图片可以从任何URL中加载,所以将img的src设置成其它域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应 var img=new Image(); img.onload=img.onerror=function(){ alert('done'); } var getBody=document.getElementByTagName('body')[0]; getBody.appendChild(img); 以上这篇js从外部获取图片

  • JavaScript简单获取页面图片原始尺寸的方法

    本文实例讲述了JavaScript简单获取页面图片原始尺寸的方法.分享给大家供大家参考,具体如下: 这里通过Image()对象获取原始宽高 这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取. var img = new Image(); img.src = $("#target").attr("src"); if(img.complete){ alert('width:'+img.width+',height'+img.

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • Js获取图片原始宽高的实现代码

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

  • js兼容火狐获取图片宽和高的方法

    本文实例讲述了js兼容火狐获取图片宽和高的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>获取Image 宽高</title> </head> <body> <

  • js兼容火狐显示上传图片预览效果的方法

    js兼容火狐显示上传图片预览效果的方法

    本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

  • vue-preview动态获取图片宽高并增加旋转功能的实现

    vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用 第一步:安装 npm i vue-preview -S 第二步:引用配置 import VuePreview from 'vue-preview' Vue.use(VuePreview) Vue.use(preview, { mainClass: 'pswp--minimal--dark', barsSize: {top: 0, bo

  • Android编程获取控件宽和高的方法总结分析

    Android编程获取控件宽和高的方法总结分析

    本文总结分析了Android编程获取控件宽和高的方法.分享给大家供大家参考,具体如下: 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们自己写一个控件,这个控件非常简单: public class MyImageView extends ImageView { public MyImageView(Context context, AttributeSet attrs) { super(context, attrs); } public MyIm

  • vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽.高.距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Android编程获取图片和视频缩略图的方法

    本文实例讲述了Android编程获取图片和视频缩略图的方法.分享给大家供大家参考,具体如下: 从Android 2.2开始系统新增了一个缩略图ThumbnailUtils类,位于framework的android.media.ThumbnailUtils位 置,可以帮助我们从mediaprovider中获取系统中的视频或图片文件的缩略图,该类提供了三种静态方法可以直接调用获取. 1. createVideoThumbnail static Bitmap createVideoThumbnail(

  • JS上传图片前实现图片预览效果的方法

    本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • Js与Jq获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cl

随机推荐