JavaScriptで画像の実際の幅と高さを取得しますか？ （Safari / Chromeの場合）
https://stackoverflow.com/questions/318630
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jQueryプラグインを作成しています。
SafariのJavascriptで実際の画像の幅と高さを取得するにはどうすればよいですか？
以下はFirefox 3、IE7、Opera 9で動作します：
var pic = $("img")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
ただし、SafariやGoogle ChromeなどのWebkitブラウザーでは値は0です。
解決
Webkitブラウザーは、画像の読み込み後に高さと幅のプロパティを設定します。タイムアウトを使用する代わりに、イメージのonloadイベントを使用することをお勧めします。以下に簡単な例を示します。
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
CSSが画像の寸法に与える影響を避けるために、上記のコードは画像のメモリ内コピーを作成します。これは、 FDisk が提案する非常に賢明なソリューションです。
naturalHeightおよびnaturalWidth HTML5属性も使用できます。
他のヒント
HTML5 <のnaturalHeightおよびnaturalWidth属性を使用します。
例：
var h = document.querySelector('img').naturalHeight;
IE9 +、Chrome、Firefox、Safari、Operaで動作（統計）。
function getOriginalWidthOfImg(img_element) {
var t = new Image();
t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
return t.width;
}
画像または画像寸法属性からスタイルを削除する必要はありません。 JavaScriptで要素を作成し、作成されたオブジェクトの幅を取得します。
根本的な問題は、WebKitブラウザー（SafariおよびChrome）がJavaScriptおよびCSS情報を並行してロードすることです。したがって、CSSのスタイリング効果が計算される前にJavaScriptが実行され、誤った答えが返される場合があります。 jQueryでは、document.readyState == 'complete'、.e.g。、
になるまで待つことが解決策であることがわかりましたjQuery(document).ready(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
//console.info('ready...');
setTimeout( arguments.callee, 100 );
return;
}
... (rest of function)
幅と高さに関する限り、あなたがしていることに応じて、ボーダーやパディングなどを含むoffsetWidthとoffsetHeightが必要になる場合があります。
WebKitキャッシュから画像が読み込まれた場合にonloadイベントが発生しないという問題について、受け入れられている回答には多くの議論があります。
私の場合、キャッシュされた画像に対してsetTimeoutが起動しますが、高さと幅はまだ0です。簡単なvar src = img.src; img.src = ""; img.src = src;で問題が解決しました：
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
画像がキャッシュからロードされた場合でも<=>イベントが発生する理由について話すことができません（jQuery 1.4 / 1.5の改善？）<！>＃8212;ただし、この問題が引き続き発生する場合は、おそらく私の回答と<=>テクニックの組み合わせが機能します。
（私の目的のために、画像の属性またはCSSスタイルのいずれかで事前に定義された寸法については心配していませんが、Xaviの答えに従ってそれらを削除したい場合があります。またはクローン画像。）
これは私のために動作します（safari 3.2）、window.onloadイベント内から発火することにより：
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
プログラムを使用して画像を取得し、DOMをいじることなくJavaScriptを使用して寸法を確認できます。
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
image.naturalHeightおよびimage.naturalWidthプロパティはどうですか？
Chrome、Safari、Firefoxのかなりの数のバージョンで正常に動作するようですが、IE8またはIE9でもまったく動作しません。
実際の画像を点滅させずに正しい実際の寸法を取得する方法：
(function( $ ){
$.fn.getDimensions=function(){
alert("First example:This works only for HTML code without CSS width/height definition.");
w=$(this, 'img')[0].width;
h=$(this, 'img')[0].height;
alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
//This is bad practice - it shows on your monitor
$(this, 'img')[0].removeAttribute( "width" );
$(this, 'img')[0].removeAttribute( "height" );
alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+ $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
//I'am going to repare it
$(this, 'img')[0].width=w;
$(this, 'img')[0].height=h;
//This is a good practice - it doesn't show on your monitor
ku=$(this, 'img').clone(); //We will work with a clone
ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
ku[0].removeAttribute( "width" );
ku[0].removeAttribute( "height" );
//Now we still get 0
alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
//Hide a clone
ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});
//A clone appending
$(document.body).append (ku[0]);
alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
//Remove a clone
$("#mnbv1lk87jhy0utrd").remove();
//But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object
imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy
$(document.body).append (imgcopy);//append to document
alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
$("#mnbv1lk87jhy0aaa").remove();
}
})( jQuery );
$(document).ready(function(){
$("img.toreaddimensions").click(function(){$(this).getDimensions();});
});
<！> lt; img class = <！> quot; toreaddimensions <！> quot; ...
で動作しますJqueryには、naturalWidthとnaturalHeightという2つのプロパティがあり、この方法で使用できます。
$('.my-img')[0].naturalWidth
$('.my-img')[0].naturalHeight
my-imgは、画像の選択に使用されるクラス名です。
前述のとおり、画像がキャッシュにある場合、Xaviの回答は機能しません。この問題は、キャッシュされた画像でloadイベントを発生させないWebkitに応答するため、imgタグでwidth / height attrsが明示的に設定されていない場合、画像を取得する唯一の信頼できる方法は、window.loadイベントが発生するのを待つことです。
img.srcイベントは常にを起動するため、その後の幅/高さとimgに安全にアクセスできます。
$(window).load(function(){
//these all work
$('img#someId').css('width');
$('img#someId').width();
$('img#someId').get(0).style.width;
$('img#someId').get(0).width;
});
キャッシュされる（以前に読み込まれた）可能性のある動的に読み込まれた画像のサイズを取得する必要がある場合、Xaviメソッドとクエリ文字列を使用して、キャッシュの更新をトリガーできます。欠点は、既にキャッシュされており、すでに使用可能であるはずのimgに対して、サーバーへの別の要求が発生することです。愚かなWebkit。
var pic_real_width = 0,
img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();
$('<img/>').attr('src', img_src_no_cache).load(function(){
pic_real_width = this.width;
});
ps：すでに<=>にQueryStringがある場合、解析して、追加のパラメータを追加してキャッシュをクリアします。
Luke Smithが言うように、画像の読み込みは混乱です。すべてのブラウザで信頼できるわけではありません。この事実は私に大きな痛みを与えました。一部のブラウザでは、キャッシュされた画像はイベントをまったく起動しません。そのため、<！> quot;画像のロードはsetTimeout <！> quot;よりも優れています。間違っています。
Luke Smithのソリューションは、こちら
そして、興味深い議論があります混乱はjQuery 1.4で処理される可能性があります。
幅を0に設定してから<！> quot; complete <！> quot;を待つのはかなり信頼できることがわかりました。プロパティがtrueになり、widthプロパティがゼロより大きくなります。エラーも監視する必要があります。
$("#myImg").one("load",function(){
//do something, like getting image width/height
}).each(function(){
if(this.complete) $(this).trigger("load");
});
Chrisのコメントより： http://api.jquery.com/load-event/
私の状況はおそらく少し異なります。 JavaScriptを使用して画像のsrcを動的に変更しており、新しい画像のサイズが固定されたコンテナ（フォトギャラリー内）に収まるようにする必要があります。最初に、画像の読み込み後に（画像の読み込みイベントを介して）画像の幅と高さの属性を削除し、優先寸法を計算した後にこれらをリセットしました。ただし、それはSafariおよびおそらくIEでは動作しません（IEで完全にテストしたことはありませんが、画像は表示されないので...）。
とにかく、Safariは前の画像の寸法を保持するため、寸法は常に1画像後ろになります。これはキャッシュと関係があると思います。そのため、最も簡単な解決策は、画像を複製してDOMに追加することです（withとheightを取得するためにDOMに追加することが重要です）。画像の可視性の値をhiddenに設定します（動作しないため、display noneは使用しないでください）。ディメンションを取得したら、クローンを削除します。
jQueryを使用したコードは次のとおりです。
// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image
var cloned,
o_width,
o_height,
src = 'my_image.jpg',
img = [some existing image object];
$(img)
.load(function()
{
$(this).removeAttr('height').removeAttr('width');
cloned = $(this).clone().css({visibility:'hidden'});
$('body').append(cloned);
o_width = cloned.get(0).width; // I prefer to use native javascript for this
o_height = cloned.get(0).height; // I prefer to use native javascript for this
cloned.remove();
$(this).attr({width:o_width, height:o_height});
})
.attr(src:src);
このソリューションはどんな場合でも機能します。
キャッシュされた画像でloadイベントが発生しない場合に対処するためのjQueryプラグインevent.special.loadが追加されました： http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
最近、グラフを表す.dialogのデフォルトサイズを設定するための幅と高さを見つける必要がありました。私が使用した解決策は：
graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
graph.bind('load', function (){
wid = graph.attr('width');
hei = graph.attr('height');
graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
})
私にとって、これはFF3、Opera 10、IE 8,7,6で動作します
PS LightBoxやColorBoxなどのプラグインの内部を見ると、さらにソリューションが見つかるかもしれません
Xaviの回答に追加するには、 ポールアイリッシュのgithub David Desandroのgitgubは、同じ原理で動作し、一部のブラウザのキャッシュされた画像の問題を回避するimagesLoaded（）という関数を提供します.load（）イベントを発生させない（巧妙なoriginal_src-<！> gt; data_uri-<！> gt; original_src切り替えを使用）。
これは広く使用され、定期的に更新されているため、問題に対する最も堅牢なソリューションであるIMOに貢献しています。
これは、キャッシュされたイメージと動的にロードされたイメージの両方で機能します。
function LoadImage(imgSrc, callback){
var image = new Image();
image.src = imgSrc;
if (image.complete) {
callback(image);
image.onload=function(){};
} else {
image.onload = function() {
callback(image);
// clear onLoad, IE behaves erratically with animated gifs otherwise
image.onload=function(){};
}
image.onerror = function() {
alert("Could not load image.");
}
}
}
このスクリプトを使用するには：
function AlertImageSize(image) {
alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);
imagesLoaded jqueryプラグインを使用して、いくつかの回避策ユーティリティ機能を実行しました。 https://github.com/desandro/imagesloaded
function waitForImageSize(src, func, ctx){
if(!ctx)ctx = window;
var img = new Image();
img.src = src;
$(img).imagesLoaded($.proxy(function(){
var w = this.img.innerWidth||this.img.naturalWidth;
var h = this.img.innerHeight||this.img.naturalHeight;
this.func.call(this.ctx, w, h, this.img);
},{img: img, func: func, ctx: ctx}));
},
URL、関数、およびそのコンテキストを渡すことでこれを使用できます。関数は画像が読み込まれた後に実行され、作成された画像、その幅と高さを返します。
waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
画像がすでに使用されている場合は、次のように示します：
-
画像のシミュレーションを初期に設定
image.css（ 'width'、 'initial'）; image.css（ 'height'、 'initial'）;
-
寸法を取得
var originalWidth = $（this）.width（）; var originalHeight = $（this）.height（）;
HTML画像要素のnaturalWidthおよびnaturalHeightプロパティを使用できます。 （詳細は info ）。
次のように使用します：
//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;
これは、バージョン8以前のIEを除くすべてのブラウザーで動作するようです。
元の配置または画像を変更したくない機能の場合。
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
Dioの回答を確認しましたが、私にとってはうまくいきます。
$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });
すべての関数を麻生と呼ぶようにしてください。 fadeIn（）のリコール機能の画像サイズで処理します。
これに感謝します。
別のアプローチを使用します。サーバーにAjaxを呼び出して、画像オブジェクトの使用中に画像サイズを取得します。
//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);
//callback function
function SetImageWidth(data) {
var wrap = $("div#image_gallery #image_wrap");
//remove height
wrap.find("img").removeAttr('height');
//remove height
wrap.find("img").removeAttr('width');
//set image width
if (data.width > 635) {
wrap.find("img").width(635);
}
else {
wrap.find("img").width(data.width);
}
}
そしてもちろんサーバー側のコード：
<?php
$image_width = 0;
$image_height = 0;
if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {
$imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
if ($imageinfo) {
$image_width= $imageinfo[0];
$image_height= $imageinfo[1];
}
}
$arr = array ('width'=>$image_width,'height'=>$image_height);
echo json_encode($arr);
?>
これはクロスブラウザで動作します
var img = new Image();
$(img).bind('load error', function(e)
{
$.data(img, 'dimensions', { 'width': img.width, 'height': img.height });
});
img.src = imgs[i];
を使用して寸法を取得する
$(this).data('dimensions').width;
$(this).data('dimensions').height;
乾杯！
別の提案は、 imagesLoadedプラグインを使用することです。
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
$(document).ready(function(){
var image = $("#fix_img");
var w = image.width();
var h = image.height();
var mr = 274/200;
var ir = w/h
if(ir > mr){
image.height(200);
image.width(200*ir);
} else{
image.width(274);
image.height(274/ir);
}
});
//このコードは、200 * 274次元の画像を表示するのに役立ちます
選択した画像が読み込まれるとイベントをトリガーするクロスブラウザーソリューションは次のとおりです。 http：//desandro.github .io / imagesloaded / imagesLoaded（）関数内で高さと幅を調べることができます。
私自身の質問に対する答えを見つけようとして、このスレッドにつまずいた。私はローダーの後で関数で画像の幅/高さを取得しようとしていたが、0を出し続けていました。
tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);
function preloader() {
imagesLoaded++;
if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
DetachEvent(this, 'load', preloader); //function that removes event listener
drawItems();
}
}
function drawItems() {
for(var i = 1; i <= xmlProjectInfo.length; i++)
alert(xmlProjectInfo[i - 1].image[0].width);
}
githubでこのリポジトリをチェックしてください！
Javascriptを使用して幅と高さを確認する素晴らしい例
https://github.com/AzizAK/ImageRealSize
---いくつかのコメントから編集が要求されます..
Javascriptコード：
function CheckImageSize(){
var image = document.getElementById("Image").files[0];
createReader(image, function (w, h) {
alert("Width is: " + w + " And Height is: "+h);
});
}
function createReader(file, whenReady) {
var reader = new FileReader;
reader.onload = function (evt) {
var image = new Image();
image.onload = function (evt) {
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
およびHTMLコード：
<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>
