如何在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.9K3 0

网易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都能兼容的

1K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端面试题-每日练习(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缓存，图片服务器。

1342 0

前端性能优化

不要使用CSS表达式 CSS表达式可以在CSS里执行JavaScript，仅IE5-IE7支持，IE8标准模式已经废弃。...使用替代@import 对于IE某些版本，@import的行为和放在页面底部一样。所以，不要用它。 4....不要使用 filter AlphaImageLoader为IE5.5-IE8专有的技术，和CSS表达式一样，放进博物馆吧。...使用外部JavaScript和CSS 外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。当然，实际中也需要考虑代码的重用程度。...很多 CMS 和 CDN 都提供图片裁切功能。补充：设置图片的宽和高，以免浏览器按照「猜」的宽高给图片保留的区域和实际宽高差异，产生重绘。 4.

2K4 1

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就能被独立识别。

4.9K5 0

Android内存优化-Bitmap内存优化

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

1.5K3 0

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.4K3 0

基于jQuery 常用WEB控件收集

具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。...提供所有基本的RichText功能，调整文本区域大小，使用AjaxFileUpload插件上传图片，清除HTML标签，标记文本修改，支持多种浏览器（FF1.5+、IE7、IE6）。...Date Picker JQuery.Resizer 一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。...图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。...图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。

7.5K1 0

自定义 WordPress 样式

2）将上图的“IT-Homer”字样，移到页脚右下方通过chrome调试工具，查看“IT-Homer”样式，找出修改的css文件，调试方法如下： ?.../wp-admin/images/wordpress-logo.png，修改替换成自己的logo wordpress-logo.png 图片默认宽和高为 274px 63px .login h1 a{...274px 63px;background-position:top center;background-repeat:no-repeat;width:326px;height:67px; 根据这个宽高可以调整自己图片大小...，也可以修改其默认宽高，打开css文件： ..../wp-admin/css/wp-admin.css，搜索“.login h1 a”，找到上面浅蓝色位置，修改成自己图片宽高，如下图修改成我自己iforum的logo大小 113px 70px ?

1.6K4 0

谷歌插件Image downloader开发之popup

this.resetImgContainer('bgImg') this.resetImgContainer('img') // 获取图片的宽高...，mapImg方法用来获取图片的长和宽，下文会讲到。...，@幾米提到了图片去重的问题，所有在返回图片是，用es6的Set方法去重，这个只处理同类型图片的去重，不处理如背景图片和图片标签之间的重复图片。..., imgs) { imgs.forEach((src) => { this.imgNatureSize(container, src) }) }, /** * 获取图片原始宽高...，获取图片的宽和高，并将宽高属性保存起来下载图片 /** * 下载图片 */ downLoad(url) { chrome.downloads.download({ url }, () =

1.1K0 0

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.1K1 0

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

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

1.8K2 0

(第一版)知识点

通过浏览器如何查看请求报文和响应报文?...负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。内核的分类： Trident：ie , 猎豹安全浏览器,360极速浏览器,百度浏览器......prt scsysrq 新建画布，放大缩小图片，新建图层，复制图层，吸管使用，渐变，钢笔，打字，图片切图、去除图片上的文字、alt+delete前景颜色、ctrl+delete后景颜色第二章...块和内嵌的转换？ 1.display:block; 显示为块 2.Display:inline;显示为内嵌块状元素如何在同一行显示？...，7下不兼容 zoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

1K2 0

android webview加载html图片自适应手机屏幕大小&点击查看大图

如果html中图片没有设置大小，可以采用下面简单方法，设置图片的宽高，但图片可能会变形。...Jsoup查找img标签，替换图片的宽度和高度实现步骤： 1....方法三：使用js脚本，重置img标签中图片的宽度和高度此方法需要使用js,固webview设置属性中一定要添加下面这句 webSettings.setJavaScriptEnabled(true);/...WebView view, String url) { super.onPageFinished(view, url); imgReset();//重置webview中img标签的图片大小...WebView view, String url) { super.onPageFinished(view, url); imgReset();//重置webview中img标签的图片大小

6.2K1 0

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

9114 0

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.2K1 0

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.4K1 0

ps切图必知必会

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

2.9K2 0

Android图片压缩的实例详解

android图片压缩主要有两种方式：1.压缩图片分辨率 2.压缩图片质量一、先看压缩图片分辨率，很好理解，如本来1280*768的图片压缩为640*384大小。...，第3个方法可以随意指定期望的宽高，缩放图片。...BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; // 假解,来获取图片大小...options.outWidth; int inSampleSize = 1; if (height reqHeight || width reqWidth) { // 计算出实际宽高和目标宽高的比率...这种压缩只是对图片质量有影响，并不会改变图片大小。当然，如有需要，以上两种压缩方法可以结合使用。

4923 1

（tkinter）撩妹弹窗（3）之不要越过三八线，canvas的使用方法

w = tk.winfo_screenwidth()#获取屏幕宽 h = tk.winfo_screenheight()#获取屏幕高 cn=Canvas(tk, height=h, width=w,bg...="white")#设置画布高宽，背景颜色 ?...宽的计算等于多少呢？ width=w/2-x w为屏幕的宽，x为坐标的x，也就是窗体的位置坐标横坐标。然后就得到矩形的宽。窗口的高即为矩形的高，也是就得到了这个变化。...image = Image.open("Figure_1.jpg") # 打开图片 image = image.resize((300, 300)) # 设置图片大小 photo = ImageTk.PhotoImage...("Figure_1.jpg") # 打开图片 image = image1.resize((300, 300)) # 设置图片大小 photo = ImageTk.PhotoImage(image

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭