如何用js获取html内图片的宽高并写入<img>标签内 多个图片自动获取怎么写

如何用js获取html内图片的宽高并写入标签内 多个图片自动获取怎么写

单个是这个写的:







function getImageSize(imgE){ var i = new Image(); //新建一个图片对象 i.src = imgE.src;//将图片的src属性赋值给新建的图片对象的src return new Array(i.width,i.height); } var imageE = document.getElementById("imageE"), imageSize = getImageSize(imageE), imgwidth = imageSize[0], imgheight = imageSize[1]; $("#imageE").attr("width",imgwidth); $("#imageE").attr("height",imgheight); console.log(imgwidth); console.log(imgheight);



但是这个只能判断一个,那如果id是变量的如何写呢?

0

2个回答

首先这些图片是已经存在的么?
如果是已经存在的图片就简单了。
Jquer的写法:
$('img').each((i,v)=>{
let img_w = $(v).width();
let img_h = $(v).height();
$(v).attr({width:img_w,height:img_h});
});
有些es6的特性语法,你应该认识的。

1
miker2266
miker2266 回复miker2266: 对了大哥 你这是写出所有类型为img的宽高 那如果要指定id或者class怎么写呢
2 年多之前 回复
miker2266
miker2266 有个问题是这样的,我在帝国中使用循环语句 图片是后面载入的怎么解决 一般情况下都会出现尺寸被提前定下来了导致宽高不准
2 年多之前 回复
 var w= $(img).width();
var h = $(img).height();
$(img).css({"width";w,"height":h});
1
sunny_desmond
jed_shi 回复miker2266: 直接 w+"px" ;就行啦
2 年多之前 回复
miker2266
miker2266 十分感谢大哥的回答 小弟还有个问题 如何在width=“xx”里面加个px
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于Img标签在固定宽高的容器内部以图片比例缩放存在
关于Img标签在固定宽高的容器内部以图片比例缩放存在 写这篇文章对自己的想法做一些总结等 起因: 下载一些素材的时候看到排版方式是(下图)的样子,而且图片基本上都是没有变形,扭曲 就产生了&quot;兴趣&quot;,看了看源码 又自己想了几种方式方法; 这个源代码采用JS遍历的方式对每一个图片进行布局 而我打算采用  CSS进行图片的样式布局(暂时只想到了三种方式) (1)父级相对定位,子级 绝对定位 设...
正则获取html中的 <img src = 图片地址
通过正则表达式,解析html中的<img 标签,获取图片地址。还有部分正则没处理显示
js获取img宽高
知识点1如果写了var img = new Image(100 ,100), img.src = ‘1.png’ ,这样的作用是可以把img缓存到浏览器中,常用来做图片预加载。知识点2html代码:<img src='1.png' style="width:400px" />js代码:var imgW = document.getElementsByTagName('img')[0].style.w
js动态加载图片,获取图片宽高并缩放
近期在项目中遇到个问题: 一个下拉框改变后就去h
计算动态插入的IMG标签的宽高问题
一、先看代码如下: $(document).ready(function() { $(&quot;#cc&quot;).append(&quot;&quot;); alert($(&quot;#aa&quot;).width()); }); 结果为:200 注:所有浏览器都得到正确的结果 二、把插入的元素改为IMG 代码如下: $(document).ready(function()...
【jQuery】获取图片img的真实宽高大小
在开发过程中,由于浏览器的缓存,有时候获取到&amp;lt;img&amp;gt;标签图片的高度并不是图片真实的高度,会影响我们在js代码中一些对图片尺寸的处理,那么怎么获取图片的真是高度呢?方法如下:// 获取图片真实高度 function getImageWidth(url,callback){ var img = new Image(); img.src = url; // 如果图片...
js ajax 加载图片 img的简单方法
例如网页有很多img图片,这样整个网页加载起来会变得很慢,这里可以先通过xmlhttprequest来请求,在设置到img的src中 var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob";
ajax从后台获取图片及时获取图片的原始宽高 (video标签的poster里面的img可以用这个方法为video标签占位)
var Img = document.getElementsByClassName(&quot;.videoImg&quot;); var timer = setInterval(function () {        if ($(&quot;.videoImg&quot;).width() &amp;gt; 0 || $(&quot;.videoImg&quot;).height() &amp;gt; 0) {           此时已经获取到宽高可以执行相关...
div或img图片高度随宽度自适应
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。二、我这次主要是用css来实现图片高度的自适应问题。下面是所需要的代码(这种方法是可以在图片上方垂直...
如何在页面加载完毕后获取图片高度或宽度问题
日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置。 但在jquery(function(){  /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload
js获取图片宽高的方法
js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获。 一、简陋的获取图片方式 ? 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = ‘upload/2013/136436
Java 获取Html文本中的img标签下src中的内容
/** * 得到网页中图片的地址 */ public static Set getImgStr(String htmlStr) { Set pics = new HashSet(); String img = ""; Pattern p_image; Matcher m_image; //
js 获取图片的宽高
&amp;lt;div class=&quot;pageFormContent&quot; layoutH=&quot;56&quot;&amp;gt; &amp;lt;p&amp;gt; &amp;lt;label&amp;gt;工程管理系统logo: &amp;lt;/label&amp;gt; &amp;lt;input type=&quot;file&quot; name=&quot;pmsfile&quot; id=&quot;pmsfile&quot; /&amp;gt;
JS批量替换img标签为对应img标签中的某个attr属性的值
【需求】: 如下图,页面展示的表情和文字,现在在点击“发送”按钮时,需要将img标签替换成相应的【文字】:  【解决】: 具体实现如下: 要替换的字符串为: html == &amp;lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; text_w...
js遍历一个元素下的所有img标签,并取得src
$("div[class=popup_text] img").each(function() {           var src=$(this).attr("src");         alert(pic);  });
怎样在图片未加载完成之前预先获取图片的宽高
前几天被问到一个问题,大概就是前后端进行数据交互的时候,当遇到图片数据的时候,有的公司为了节约成本问题并没有给每个图片的宽高设定相应的数据。
网页标签<IMG>标签中SRC 属性,关于通过 SERVLET 生成图片的方法
IMG 标签大家一定用过,一般是通过SRC来指向另一网络资源,但是这样有点缺点。 这样很容易暴露图片资源的位置。 这样对动态生成图片有影响。 所以我想到了用SERVLET的方法来显示小图片。  SERVLET的方法如下 import com.sun.image.codec.jpeg.*;//sun公司仅提供了jpg图片文件的编码api import java.awt.image.Buffered...
js 动态获取图片的宽度和高度像素值
一、背景 1、后台数据表在设计的时候,对于每张图片,没有记录其宽度和高度的像素值。 2、图片的宽度和高度有不同的size,比如,A类型的图片是700*500像素,B类型的图片是700*1000像素 3、在前台有一块700*500像素的固定大小的图片展示区,用于展示各种size的图片 4、A类型的图片正常展示,B类型的图限高展示,即展示成350*500像素 5、无法通过其他字段区分A类型图
html截取显示部分的img图片
html截取显示部分的img图片
HTML:img标签usemap,一个图片中添加多个链接
代码: <img src="test404_files/06.png" usemap="#Map" alt="HTTP 404,file not found" border="0"  height="422" width="450"> 解释: usemap=”#Map”调用一个name=’Map’的标签 html标签 一个对应图片中的一块 shape=”r
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式// 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = new Image()// 改变图片的src img.src = img_url// 打印 alert('width:'+img.width+',height:'+img.height);结果如下:宽高都是
iOS 获取html中的所有图片链接地址
该方法传入一个heml代码字符串,然后返回html中包含的所有图片url
怎么用正则表达式获取文章内容中的&lt;img标签和 src的路径
正则:查找Img标签开头的图片路径[iI][mM][gG][\s]*[sS][rR][cC][\s]*=[\s'"]*(?.*?(\.gif|\.jpg|\.png))查找Function中的图片路径[a-zA-Z_][a-zA-Z0-9_]+[\s]*\([^)]+?('|")(?[a-zA-Z0-9/\\-_\.]+?(\.gif|\.jpg|\.png))('|")[^)]*\)查找back
javascript 读取本地图片(file),并在img中显示
javascript 读取本地图片(file),并在img中显示 var f = document.getElementById("upload").files[0]; var src = window.URL.createObjectURL(f);
js控制img自适应父元素
function autoImg(img_select, img_url) { //img元素 var img_element = $(img_select); //img路径 var img_url = img_url; //img父级元
怎么在html的<img src="">src的值这里调用js方法或变量获取图片地址
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt;参考自 &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;img src=&quot;?&quot;  id=&quot;img&quot;&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;script language=&quot;javascript&quot;&amp;gt; var adres=&quot;图片地址&quot;
用js动态的改变img标签里面的src属性实现图片的循环切换
JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’);   具体: if(true) {  document.getElementById('id').src='a.png'; //or $('#id').attr('src','a.png');
Java获取img标签里的src路径
  public static List&amp;lt;String&amp;gt; getImgSrc(String content){         List&amp;lt;String&amp;gt; list = new ArrayList&amp;lt;String&amp;gt;();         //目前img标签标示有3种表达式         //&amp;lt;img alt=&quot;&quot; src=&quot;1.jpg&quot;/&amp;gt;   &amp;l
js在onload事件前获取图片的宽高,js尽快获取图片的宽高
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。一、简陋的获取图片方式// 图片地址 后面加时间戳是为了避免缓存var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'
用正则表达式过滤出html中得 img标签,并且把URL链接给取出来
最近做项目要处理html数据,其中是过滤出当中的图片,网上找了很多办法都不是很好用,发现用正则可以实现这个需求,有错误欢迎大家提出,共同讨论写正则的方法,下面是实现代码。 + (NSArray *)filterTheImgUrlArrFromfahterHtml:(NSString *)html{     //]*>找img标签的正则     NSString *ss = @"]
使用正则表达式从一段字符串中匹配出img标签的src值
第一步:匹配内容中存在的img标签; 第二步:得到匹配到的img标签中的内容; 第三步:匹配第二步得到的img标签中的src /**  * 获取img标签中的src值  * @param content  * @return  */ public static List getImgSrc(String content){           List list = new A
html img动态获取后台的图片资源-例子
我们需要动态获取后台的图片,现举例如下: [code=&quot;java&quot;] 下载img [/code] 后台的代码: [code=&quot;java&quot;] [/code]
js如何通过正则表达式获取所有的img的src
js如何通过正则表达式获取所有的img的src 思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 从匹配出来的结果(img标签中)循环匹配出图片地址(即src属性) "text/javascript"> //思路分两步: //1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 //2.从匹配出来的结果(img标签中)循环匹配出图片地址
js图片不变形缩略图
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;l
Html显示内存图片
如何让网页里面的图片,直接从内存数据加载,而不是一个图片文件的链接查了一些资料,基本概念如下:1. Data URI scheme。这个概念参考:https://en.wikipedia.org/wiki/Data_URI_scheme2. Data URI scheme 包括:data:,文本数据data:text/plain,文本数据data:text/html,HTML代码data:text...
JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。 我们一步一步进入这个过程。 一、简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11
(转)PHP正则提取图片img标记中的任意属性修改
/*PHP正则提取图片img标记中的任意属性*/$str = '&amp;lt;center&amp;gt;&amp;lt;img src=&quot;/uploads/images/20100516000.jpg&quot; height=&quot;120&quot; width=&quot;120&quot;&amp;gt;&amp;lt;br /&amp;gt;PHP正则提取或更改图片img标记中的任意属性&amp;lt;/center&amp;gt;';//1、取整个图片代码preg_match(
JavaScript之动态改变img标签里面的src属性实现图片的循环切换
JS:根据循环切换的条件可以用document.getElementById('').src=''设置,或者jquery方法:$('#id').attr('src','图片名称’);具体:if(true) { document.getElementById('id').src='a.png';}else { document.getElementById('id').src='b.png';}或者
图片随父级元素自适应
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;测试用例&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&q
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签的正则公式
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签 后台发来一个富文本字符串里面可能包含了0、1、2、3…图片标签(img),我们的任务是获取这个字符串里面第一张图片的url,如果没有图片则放回空 var imgUrlFun = function(str){ var data = ''; str.replace(/&amp;amp;amp;lt;img [^&amp;amp;amp;...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 内设计培训 java如何用深度学习