divに収まるようにサイズが変更されたページ上の画像、たとえば400x300があります。 jQueryでイメージの全サイズ(〜4000x3000)を取得するにはどうすればよいですか? .width()と.height()は画像の現在のサイズを返すように見えます。javascript/jqueryで画像のフルサイズを取得
8
A
答えて
21
画像は、画像の実際の、非改変の幅と高さを含んでいnaturalWidth
とnaturalHeight
性質を持っているの本当の大きさ、すなわちそのイメージは、CSSがそれを設定するものではありません。
$('#idOfMyimg').on('load', function() {
var height = this.naturalHeight,
width = this.naturalWidth;
});
は別のオプションは、ソースと同じファイルを使用して新しいイメージを作成し、それから寸法を取得することですけれども
一つはまだ限り、ロードするために画像を待たなければならないだろうそれがDOMに追加されたことがないですが、外部のないスタイルは...見なかったこと
var img = new Image();
img.onload = function() {
var height = this.height,
width = this.width;
}
img.src = $('#idOfMyimg').attr('src');
1
あなたが好き同じソースファイルを保持Image
オブジェクトでこれを行うことができます。
VAR PIC = $( "IMG")
//必要性:これを試してみてください
var preloader = new Image();
preloader.src = 'path/to/my/file.jpg';
preloader.onload = function(){
var height = preloader.height;
var width = preloader.width;
}
-2
4
イメージを複製し、高さと幅の属性を削除し、本文に追加して幅とサイズを取得してから削除することができます。
jsFiddleデモはここにある:http://jsfiddle.net/58dA2/
コード:
$(function() {
var img = $('#kitteh'); // image selector
var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
$('#height').text(hiddenImg.height());
$('#width').text(hiddenImg.width());
hiddenImg.remove();
});
関連する問題
- 1. ポップアップでフルサイズの画像
- 2. Androidタブアイコン画像のフルサイズ
- 3. 画像をAndroidでフルサイズに設定
- 4. sphotos.xx.fbcdn.netフルサイズの画像を添付した画像
- 5. HTMLフルサイズの画像、固定の高さ
- 6. cameraOverlayViewで画像を取得
- 7. PHPでサムネイルマウスオーバーでフルサイズの画像を動的に表示
- 8. webviewの直接画像のリンクをフルサイズで表示
- 9. アンドロイドで、カメラから取得した画像の画像IDを取得する
- 10. ワードプレス画像取得
- 11. 取得日画像の取得
- 12. ASP.NETストアSQLで画像を取得し、Asp用に取得:画像
- 13. React Native - フルサイズの画像の代わりにカメラロールのサムネイルを取得する方法
- 14. MATLABで画像の一部を取得
- 15. PHPで画像オブジェクトのコンテンツを取得
- 16. Silverlight:画像サイズを取得
- 17. 画像サイズを取得2008
- 18. UIImagePickerControllerは他のビューの画像をフルサイズにします
- 19. Wordpress:フルサイズの画像のアップロードを停止する
- 20. Facebook og:画像がフルサイズで表示されない
- 21. iosで画像からテキストを取得する(画像処理)
- 22. URIでウェブから画像を取得
- 23. ウェブアプリケーションでスキャナから画像を取得
- 24. Android、GridView、フルサイズを表示するには画像をクリック
- 25. 入力フィールドから画像を取得して画像データを取得する/画像を表示
- 26. Android webviewの使用方法フルサイズの巨大画像
- 27. 画像の特定の部分を取得する(画像)
- 28. GoogleコンタクトAPI - 画像取得
- 29. 外部URL取得画像
- 30. MVC3を使用してサムネイル画像をクリックし、フルサイズの画像を新しいブラウザウィンドウで開くには
感謝に影響を与えます。 – emc