首页
学习
活动
专区
工具
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
  • 前端面试题-每日练习(3)

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

    15420

    Android内存优化-Bitmap内存优化

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

    1.6K30

    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浏览器从所有情况中分离出来。然后,再次使用“+”将IE8和I7、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.jpg和src.jpg大小相同,因为原始图片宽比100大。...8.使用^命令后缀可以使用宽高中较小的那个值作为尺寸 如:convert -resize “300×300^” src.jpg dst.jpg 此命令执行后,dst.jpg图片大小为(400×300),

    2.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.6K10

    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条边即可

    95040

    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

    JS获取图片原始宽高

    最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement...使用HTMLImageElement.naturalWidth拿到图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0 这样就可以拿到图片的原始大小 ps:各位国庆节快乐!

    6.4K20
    领券