blocks|key|934212|text|创建新的Image|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|934213|var+img+=+new+Image();|code-block|syntax|javascript|934214|设置src|934215|img.src+=+your_src|934216|获取width和height|934217|//img.width
//img.height|934218|entityMap^0|4|5|0|0|2|3|0|0|2|5|8|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

Make a new <code>Image</code>

<pre><code>var img = new Image();
</code></pre>

Set the <code>src</code>

<pre><code>img.src = your_src
</code></pre>

Get the <code>width</code> and the <code>height</code>

<pre><code>//img.width
//img.height
</code></pre>

blocks|key|934233|text|var+img+=+new+Image();

img.onload+=+function(){
++var+height+=+img.height;
++var+width+=+img.width;

++//+code+here+to+use+the+dimensions
}

img.src+=+url;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|934234|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var img = new Image();

img.onload = function(){
 var height = img.height;
 var width = img.width;

 // code here to use the dimensions
}

img.src = url;
</code></pre>

blocks|key|934260|text|类似的问题在这里使用JQuery进行问答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|934261|Get+width+height+of+remote+image+from+url|offset|length|934262|function+getMeta(url){
++$("<img/>").attr("src",+url).load(function(){
+++++s+=+{w:this.width,+h:this.height};
+++++alert(s.w%2B'+'%2Bs.h);++++++
++});+
}

getMeta("http://page.com/img.jpg");|code-block|syntax|javascript|934263|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11442712/javascript-function-to-return-width-height-of-remote-image-from-url^0|0|0|15|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Similar question asked and answered using JQuery here:

<a href="https://stackoverflow.com/questions/11442712/javascript-function-to-return-width-height-of-remote-image-from-url">Get width height of remote image from url</a>

<pre><code>function getMeta(url){
 $("&lt;img/&gt;").attr("src", url).load(function(){
 s = {w:this.width, h:this.height};
 alert(s.w+' '+s.h); 
 }); 
}

getMeta("http://page.com/img.jpg");
</code></pre>

blocks|key|718609|text|这将使用该函数并等待其完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|718610|http://jsfiddle.net/SN2t6/118/|offset|length|718611|function+getMeta(url){
++++var+r+=+$.Deferred();

++$('<img/>').attr('src',+url).load(function(){
+++++var+s+=+{w:this.width,+h:this.height};
+++++r.resolve(s)
++});
++return+r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
++++alert(test.w+%2B+'+'+%2B+test.h);
});|code-block|syntax|javascript|718612|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

This uses the function and waits for it to complete.

<a href="http://jsfiddle.net/SN2t6/118/" rel="noreferrer">http://jsfiddle.net/SN2t6/118/</a>

<pre><code>function getMeta(url){
 var r = $.Deferred();

 $('&lt;img/&gt;').attr('src', url).load(function(){
 var s = {w:this.width, h:this.height};
 r.resolve(s)
 });
 return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
 alert(test.w + ' ' + test.h);
});
</code></pre>

blocks|key|718654|text|使用jQuery获取图像大小|type|unstyled|depth|inlineStyleRanges|entityRanges|data|718655|function+getMeta(url){
++++$("<img/>",{
++++++++load+:+function(){
++++++++++++alert(this.width%2B'+'%2Bthis.height);
++++++++},
++++++++src++:+url
++++});
}|code-block|syntax|javascript|718656|使用JavaScript获取图像大小|718657|function+getMeta(url){+++
++++var+img+=+new+Image();
++++img.onload+=+function(){
++++++++alert(+this.width%2B'+'%2B+this.height+);
++++};
++++img.src+=+url;
}|718658|使用JavaScript+(现代浏览器、IE9%2B+)获取图像大小|718659|function+getMeta(url){+++
++++var+img+=+new+Image();
++++img.addEventListener("load",+function(){
++++++++alert(+this.naturalWidth+%2B'+'%2B+this.naturalHeight+);
++++});
++++img.src+=+url;
}|718660|简单地使用上面的代码:+getMeta(+"http://example.com/img.jpg“)；|offset|length|718661|https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement|718662|entityMap|0|LINK|mutability|MUTABLE|url|http://example.com/img.jpg|1^0|0|0|0|0|0|0|M|Q|0|0|0|1Q|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|19|8|@]|9|@$Q|1A|R|1B|1|1C]]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$Q|1E|R|1F|1|1G]]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|T]]]]

Get image size with jQuery

<pre><code>function getMeta(url){
 $("&lt;img/&gt;",{
 load : function(){
 alert(this.width+' '+this.height);
 },
 src : url
 });
}
</code></pre>

Get image size with JavaScript

<pre><code>function getMeta(url){ 
 var img = new Image();
 img.onload = function(){
 alert( this.width+' '+ this.height );
 };
 img.src = url;
}
</code></pre>

Get image size with JavaScript (modern browsers, IE9+ )

<pre><code>function getMeta(url){ 
 var img = new Image();
 img.addEventListener("load", function(){
 alert( this.naturalWidth +' '+ this.naturalHeight );
 });
 img.src = url;
}
</code></pre>

Use the above simply as: getMeta( "<a href="http://example.com/img.jpg" rel="nofollow noreferrer">http://example.com/img.jpg</a>" );

<a href="https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement" rel="nofollow noreferrer">https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement</a>

blocks|key|718869|text|如果您有来自输入表单的图像文件。您可以像这样使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|718870|let+images+=+new+Image();
images.onload+=+()+=>+{
+console.log("Image+Size",+images.width,+images.height)
}
images.onerror+=+()+=>+result(true);

let+fileReader+=+new+FileReader();
fileReader.onload+=+()+=>+images.src+=+fileReader.result;
fileReader.onerror+=+()+=>+result(false);
if+(fileTarget)+{
+++fileReader.readAsDataURL(fileTarget);
}|code-block|syntax|javascript|718871|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if you have image file from your input form.
you can use like this

<pre><code>let images = new Image();
images.onload = () =&gt; {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () =&gt; result(true);

let fileReader = new FileReader();
fileReader.onload = () =&gt; images.src = fileReader.result;
fileReader.onerror = () =&gt; result(false);
if (fileTarget) {
 fileReader.readAsDataURL(fileTarget);
}
</code></pre>

blocks|key|718908|text|组合promises和typescript类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|718909|/**
+*+Returns+image+dimensions+for+specified+URL.
+*/
export+const+getImageDimensions+=+(url:+string):+Promise<{width:+number,+height:+number}>+=>+{
++return+new+Promise((resolve,+reject)+=>+{
++++const+img+=+new+Image();
++++img.onload+=+()+=>+resolve({
++++++width:+img.width,
++++++height:+img.height,
++++});
++++img.onerror+=+(error)+=>+reject(error);
++++img.src+=+url;
++});
};|code-block|syntax|javascript|718910|用法：|718911|try+{
++const+{width,+height}+=+await+getImageDimensions(entry.NWS_IMAGE);
++console.log(`Image+dimensions:+${width}px+x+${height}px`);
}+catch+(e)+{
++//+Could+not+load+image+from+specified+URL
++console.error(e);
}|718912|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Combining promises &amp; typescript typing:
<pre class="lang-js prettyprint-override"><code>/**
 * Returns image dimensions for specified URL.
 */
export const getImageDimensions = (url: string): Promise&lt;{width: number, height: number}&gt; =&gt; {
 return new Promise((resolve, reject) =&gt; {
 const img = new Image();
 img.onload = () =&gt; resolve({
 width: img.width,
 height: img.height,
 });
 img.onerror = (error) =&gt; reject(error);
 img.src = url;
 });
};
</code></pre>
Usage:
<pre class="lang-js prettyprint-override"><code>try {
 const {width, height} = await getImageDimensions(entry.NWS_IMAGE);
 console.log(`Image dimensions: ${width}px x ${height}px`);
} catch (e) {
 // Could not load image from specified URL
 console.error(e);
}
</code></pre>

I only have a URL to an image. I need to determine the height and width of this image using only JavaScript. The image cannot be visible to the user on the page. How can I get its dimensions?

JavaScript: Get image dimensions

jQuery

我只有一个图像的URL。我需要仅使用JavaScript来确定此图像的高度和宽度。用户无法在页面上看到该图像。我怎样才能得到它的尺寸？

问JavaScript:获取图片尺寸
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:获取图片尺寸EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:获取图片尺寸
EN