首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在IE上使用JavaScript获取图片大小(高、宽)和查看图片?

在IE浏览器上使用JavaScript获取图片大小(高、宽)和查看图片,可以通过以下步骤实现:

  1. 获取图片大小(高、宽):
    • 首先,创建一个Image对象:var img = new Image();
    • 设置Image对象的src属性为图片的URL:img.src = "图片URL";
    • 在Image对象的onload事件中,获取图片的高度和宽度:img.onload = function() { var height = img.height; var width = img.width; }
    • 这样就可以通过heightwidth变量获取到图片的高度和宽度了。
  • 查看图片:
    • 创建一个包含图片的<a>标签:<a href="图片URL" target="_blank"><img src="图片URL" alt="图片"></a>
    • 将该<a>标签插入到页面中的某个元素中,比如一个<div>元素:document.getElementById("divId").appendChild(a);
    • 这样就可以在页面上点击该图片,通过浏览器打开图片的链接,查看图片。

以上是在IE浏览器上使用JavaScript获取图片大小和查看图片的方法。对于其他浏览器,可以使用类似的方法来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【项目】前端图片裁剪

但是实际也的确没有什么复杂的东西,只不过使用的时候会难以避免碰到一些坑而已 兼容性 canvas.drawImage 这个方法 的兼容性我们再来看一下,现在基本大部分浏览器已经兼容了,就除了 IE6...-8 吧 但是据我们公司统计,IE使用人数都几乎为0了 IE9 :0.0% IE10:0.1% IE11:0.1% IE9 都统计为0了,那以下的几乎就可以忽略不计了,所以大胆放心使用 ?...后面四个参数,表示的就是图片的 位置, 信息 以你的图片为底图,以 imgX imgY 找到起始点,然后再以你想要的裁出大小 ? 比如这样一张图片,红色区域就是我们裁剪出来的地方 ?...第一,要知道放置的起点,所以有了 canvasX,canvasY 第二,要知道绘制的大小(用于缩放) 虽然我们已经有了裁减出来的图片大小,但是我们也要确定该图片在 canvas 绘制多大 可以以此来完成缩放功能...所以我们需要获取到以下这些数据 1、图片的 原始 2、裁减的图片位置 3、裁减的图片大小 首先拿到 图片原始,比较一下是 更长 还是更高,从而确定裁减的 大小 >,裁减的= 图片

1.9K30

网易NEC水平垂直居中

"> HTML5Course - HTML5学堂 <script type="text/<em>javascript</em>...100%; height: 100%; } .wrap > div { /*父级设置定位*/ position:absolute; left:50%; top:50%; } .wrap img { /*设置<em>图片大小</em>...那么为什么要用两张<em>图片</em>? 大家仔细看看,该方法是没有给父级设置<em>宽</em><em>高</em>,是靠<em>图片</em>来撑开,所以有一张<em>图片</em>是撑开父级的<em>宽</em><em>高</em>。...另外一张<em>图片</em>设置left、top为50%,意思就是相对它的父级定位,left、top都是父级<em>宽</em><em>高</em>的一半(父级的<em>宽</em>高等于<em>图片</em>的<em>宽</em><em>高</em>) 效果原理分析 ?...这种方法的优势 优点是可以不知道<em>图片</em>的大小,随便放张尺寸上去都能做到居中。另外,兼容性好,如果是不<em>使用</em>nth-child选择器的话,<em>IE</em>6都能兼容的

1.1K50
  • 前端面试题-每日练习(3)

    标记 SVG以及 VML 之间的一个重要的不同是,有一个基于 JavaScript 的绘图 API,而 SVG VML 使用一个 XML 文档来描述绘图。...主要用途:表单在网页中主要负责数据采集的功能,向服务器传送数据。 9.表单提交中GetPost方式的区别? (1)、 get 是从服务器获取数据, post 是向服务器传送数据。...当内容小于一个值(300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑,而不是出现滚动条。这时候我们就会面临这个兼容性问题。...IE浏览器才支持:after,原理方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题 优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用:腾讯,网易,新浪等等)...(1)、减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

    15020

    59道CSS面试题(附答案)

    确定容器的,例如400px、200px的div.设置层的外边距。...解决方法是使用 JavaScript代码库,或使用IE滤镜 注意:在使用E滤镜解决PNG图片透明度的时候,在1E6中,会对事件产生影响。 20、页面重构怎样操作?...因为有一个默认的行,所以在IE6下无法定义小高度的容器。 两种解决方案分别是 overflow:hidden或font-size:容器高度px 25、如何在图片下方设置几像素的空白间隙?...PNG24位的图片IE6浏览器出现背景,解决方案是改成PNG8,也可以引段脚本进行处理浏览器默认的 margin padding不同。...首先,巧妙地使用“\9”这一标记,将IE浏览器从所有情况中分离出来。然后,再次使用“+”将IE8I7、IE6分离开,这样IE8就能被独立识别。

    5K50

    Linux改变图片大小的命令,Linux运维知识之linux下使用convert命令修改图片分辨率…

    默认时,宽度高度表示要最终需要转换图像的最大尺寸,同时Convert会控制图片的宽和,保证图片按比例进行缩放。...,可以在后面加上一个感叹号!....:convert -resize “10000@” src.jpg dst.jpg 此命令执行后,dst.jpg图片大小为(115×86),图片保持原有比例(115×86= 9080 6.当原始文件大于指定的时...7.当原始文件小于指定的时,才进行图片放大转换,可使用 :convert -resize “100×500 此命令执行后,dst.jpgsrc.jpg大小相同,因为原始图片比100大。...8.使用^命令后缀可以使用高中较小的那个值作为尺寸 :convert -resize “300×300^” src.jpg dst.jpg 此命令执行后,dst.jpg图片大小为(400×300),

    2.5K30

    Android内存优化-Bitmap内存优化

    通过对 inSampleSize 的设置,对图片的像素的款进行缩放。 当 inSampleSize=1 ,即采样后的图片大小图片的原始大小,小于1,也按照1来计算。...inJustDecodeBounds 参数 我们需要获取加载的图片信息,然后交给inSampleSize 参数选择缩放比缩放,那么如何能不先加载图片却能获取图片信息,通过 inJustDecodeBunds...当获取信息,计算出缩放比后,然后在将 inJustDecodeBounds=false,再重新加载图片,就可以加载缩放后的图片。...注意:BitmapFactory 获取图片信息图片的位置以及程序运行的设备有关,比如同一张图片放在不同的drawable目录下或者程序运行在不同屏幕密度的设备,都可能导致BitmapFactory...从BitmapFactory.Options中取出图片的原始信息,他们对应于uouytWidth outHeight参数。

    1.6K30

    javascript 快速获取图片实际大小的

    javascript 快速获取图片实际大小的 简陋的获取图片实际的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的默认就是0,我们需要它加载完所有的相关数据再获取宽和。...从缓存里读取图片不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片。...+start_time // 创建对象 var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取 var check = function...这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片非常实用。

    5.5K10

    Web图像组件设计的最佳实践

    作为网页最佳实践检查中的的一部分,Lighthouse 列出了很多种优化图片加载的建议,比如下面这几点: 未指定大小的图片会降低 CLS 未指定图片会导致布局的不稳定并导致布局偏移指标 (CLS)...图片优化的主要挑战 在上面我们已经把主要问题优化方向都列出来了,事实,由于一些问题,并不是所有的网站都能作出这些优化,比如: 优先事项:Web 开发者可能通常更倾向于关注代码、JavaScript...它还允许开发者根据各种图片要求对其进行自定义的选项配置。 防止布局变化 就像上面提到的,未指定图片会导致布局的不稳定并导致布局偏移指标 (CLS) 恶化。...使用 Next.js Image 组件时,开发者必须使用 width height 属性指定图片大小,以防止任何布局偏移。...Layout = Fill:自动填充父容器 懒加载 Image 组件默认提供了一个内置的、高性能的延迟加载解决方案。

    2K20

    2021前端面试高频 HTML + CSS

    「JS引擎:」 解析执行 JavaScript 来实现网页动态效果。 ❞ 8. 常见浏览器内核 ❝ IE 浏览器内核:IE内核。...页面初始渲染,这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸,比如边距、填充、边框、宽度高度等 改变元素内容,比如文字数量,图片大小等 改变元素字体大小 改变浏览器窗口尺寸...定位到页面中心, 然后使用 transform: translate(-50%, -50%) 将元素调整到页面中心 使用 flex ,在父元素,设置 aligin-items 垂直居中 justify-content...默认宽度为内容宽度,不可设置,同行显 inline-block 默认宽度为内容宽度,可以设置,同行显示 list-item 像块类型元素一样显示,并添加样式列表标记。...利用 CSS实现 一个 三角形 /* 采用的是相邻边框连接处的均分原理 将元素的设置为0,border-width 来设置线条粗细 然后使用 transparent 隐藏掉任意3条边即可

    94040

    Android图片采样缩放功能实例代码

    inSampleSize为1,那么采样后图片大小等于原始图片大小。 inSampleSize为2,那么采样后图片均为原始图片的1/2,像素为原图的1/4,占有的内存大小为原图的1/4。...总结:inSampleSize是必须大于1的整数才有效果,小与1就相当于1,并且同时作用于,所以缩放后的图片大小以采样率的2次方形式递减.根据最新的官方文档,inSampleSize的取值应该总是为...1、将BitmapFactory.Option的inJustDecodeBound参数设为true,加载图片,这个时候图片并没有加载进内存,仅仅是去解析图片原始信息而已。...2、从BitmapFactory.Option取出图片的原始信息,对应于outWidth,outHeight参数。...options.inJustDecodeBounds=true; BitmapFactory.decodeFile(path,options); ImageSize imageSize=getImageViewSize(imageView); //获取图片大小

    1.2K10

    vw, vh视窗高单位的使用

    因此,本文后面要展示的N个demo,就没有必要再低版本的IE浏览器查看了~~ 三、明确含义 看到上图黄色背景标示的文字(“视窗”用“视区”一词代替更恰当): vw 相对于视窗的宽度:视窗宽度是100vw...最佳测试浏览器是IE9. // zxx: 不容易啊,IE系终于勃起了一把~~ 四、承上启下 视区相关单位vw, vh目前浏览器的支持算是比较弱的,因此,基本不可能从现有的站点找到相关的实际应用。...本demo中,其100%的效果就跟设置width: 100vw; height: 100vh;是一模一样的。I am a little disappointed!...您可以狠狠地点击这里:vh单位模拟office word效果demo 建议使用Chrome20+浏览器查看demo,IE9浏览器下背景图片的vh单位定位似乎有bug! ?...demo页面的按照标准纸张的21:29.7的比例制定,因此,所有单位值都是使用的vh单位。

    2.5K10

    ps切图必知必会

    ,清除辅助线,调出标尺(ctrl+R),信息(F8),即可,放大缩小(ctrl+,ctrl-)或者按住Alt键不放,滚动滚轮向上滚(放大),向下滚,缩小,显示,隐藏图层 因微信图片大小上传问题,可点击下方阅读原文进行查看...–>存储图片为web格式 因微信图片大小上传问题,可点击下方阅读原文进行查看 注意切出来图保存的格式,用电脑默认的图片查看器打不开,虽然可以直接保存,然后在底下选择图片的存储格式,那样比较麻烦,直接保存为...如何在网页中抠图 印屏幕,键盘上的prtSc SysRq键(把你屏幕你看到的给截取出来) 浏览器(chrome)插件,控制台工具,审查元素,探测到图片,打开图片url,打开图片保存即可 网页图片都可以拿到...,可点击下方阅读原文进行查看 总结 本篇主要是围绕着ps切图,抠图,从ps切图与前端的关系开始,如何使用PS工具软件对文件操作,无论设计稿是psd文档还是png图片,利用ps软件的工具栏快捷键,都可以实现快速的切图...添加前景色删除背景色 如何在网页中抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去

    3K20
    领券