clientWidth および clientHeight は、DOM要素の内部寸法の現在のブラウザ内サイズ（マージンとボーダーを除く）を示すDOMプロパティです。そのため、IMG要素の場合、これは可視画像の実際の寸法を取得します。
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
あなたはプログラムで画像を取得し、Javascriptを使用して寸法をチェックすることができます...
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';これは、画像がマークアップの一部ではない場合に便利です。
また（レックスとイアンの答えに加えて）あります：
imageElement.naturalHeight
そして
imageElement.naturalWidth
これらは（単なる画像要素ではなく）画像ファイル自体の高さと幅を提供します。
JQueryを使用していて画像サイズを要求している場合は、それらが読み込まれるまで待つ必要があります。そうしないと、ゼロしか表示されません。
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
私はこれらの答えを更新することが役に立つと思います。なぜなら、最も投票された回答の1つはclientWidthとclientHeightを使うことを示唆しているからです。
どの値が実際に返されるのかを見るために、HTML5でいくつか実験をしました。
まず第一に、私はDashと呼ばれるプログラムを使って画像APIの概要を取得しました。 heightとwidthはレンダリングされた画像の高さ/幅、naturalHeightとnaturalWidthは画像の本来の高さ/幅です（そしてHTML 5のみ）。
高さ300、幅400のファイルから、美しい蝶の画像を使いました。そして、このJavascript：
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
それから私は高さと幅のためにインラインCSSでこのHTMLを使いました。
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
結果：
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
それから私はHTMLを次のように変更しました：
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
つまり、インラインスタイルではなく高さと幅の属性を使用する
結果：
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
それから私はHTMLを次のように変更しました：
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
つまり、属性とCSSの両方を使用して、どちらが優先されるかを確認します。
結果：
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
JQueryを使用してこれを行います。
var imgWidth = $("#imgIDWhatever").width();
他のすべてが忘れていることはそれがロードされる前にあなたがイメージサイズをチェックすることができないということです。作者が投稿されたすべてのメソッドをチェックするとき、それはおそらくlocalhostだけで動作します。ここではjQueryを使用できるので、イメージがロードされる前に 'ready'イベントが発生することを忘れないでください。 $（ '＃xxx'）。width（）および.height（）はonloadイベント以降に発生します。
画像のサイズは実際にロードが完了するまでわからないので、実際にはloadイベントのコールバックを使用してのみこれを実行できます。以下のコードのようなもの...
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
jQuery library-あり
.width()と.height()を使用してください。
コード例 -
$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>そう、そうでなければファイルがロードされる前に次のステートメントが呼ばれていただろうから、それは '0 * 0'を表示するでしょう。ブラウザjqueryが必要です...
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}
実際の画像サイズを使用する前に、ソース画像を読み込む必要があります。 JQueryフレームワークを使用すれば、簡単な方法で実際の画像サイズを取得できます。
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
これ 答えはまさに私が探していたものです（jQueryで）：
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
簡単に言えば、このようにテストすることができます。
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
JQueryの回答：
$height = $('#image_id').height();
$width = $('#image_id').width();
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser 360 browser ...
あなたがページがこのようにjsまたはjqueryでロードされるとき、あなたはonloadハンドラプロパティを適用することができます -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Nicky De Maeyerは背景写真をお願いしました。私は単純にCSSからそれを取得し、 "url（）"を置き換えます。
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.
これは私の方法です、これが役立つことを願っています。 :)
これは、2019年にJavascriptまたはTypeScript、あるいはその両方を使用している人にとっては役立つと考えています。
一部の人が示唆しているように、以下が間違っていることがわかりました：
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
これは正しい：
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg:;
結論：
imgの後に、thisではなくonloadを使用します。
また使用することができます：
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
最近私はフレックススライダーのエラーについても同じ問題を抱えていました。最初の画像の高さは読み込みの遅れのために小さく設定されました。私はその問題を解決するために次の方法を試しました、そして、それはうまくいきました。
// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
これにより、元の幅やゼロではなく、設定した幅に対する高さがわかります。
Promiseを使うことを恐れないのであれば、次のような単純な関数（imageDimensions()）を持つことができます。
const imageDimensions = file => new Promise((resolve, reject) => {
try {
const img = new Image()
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
img.onerror = () => {
reject('There was some problem during the image loading')
}
img.src = URL.createObjectURL(file)
} catch (error) {
reject(error)
}
})
const getInfo = ({ target: { files } }) => {
const [file] = files
imageDimensions(file)
.then(result => {
console.info(result)
})
.catch(error => {
console.error(error)
})
}Select an image:
<input
type="file"
onchange="getInfo(event)"
/>ブラウザで解釈される設定を親のdivから削除することが重要です。実際の画像の幅と高さが必要な場合は、そのまま使用できます。
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
これは私からのTYPO3プロジェクトの一例です。ここで私は正しい関係でそれを拡大縮小するために画像の実際の特性が必要です。
要素の属性を取得する前に、ドキュメントページをonloadにする必要があります。
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}
function outmeInside() {
var output = document.getElementById('preview_product_image');
if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
} else {
output.src = URL.createObjectURL(event.target.files[0]);
}
return;
}
img.src = URL.createObjectURL(event.target.files[0]);
}
これは、複数の画像をプレビューしてアップロードするための作業です。あなたが一つずつ画像のそれぞれのために選択しなければならないならば。それからコピーしてすべてのプレビュー画像機能に貼り付けて検証します。