Gerçek görüntü boyutunu tuvalden alabilir miyiz?

Question

Görüntü etiketinde, genişlik ve yükseklik özelliğini sağlamazsak, resmin genişliğini ve yüksekliğini alırken hiçbir şey elde edemeyiz. Bir görüntü yüklemek ve orantılı olarak ölçeklemek için tuval öğesini kullanıyorum. Bunu yapmak için, gerçek görüntü boyutunu elde etmek zorundayım. Bunu html 5'te yapmak mümkün mü?

Answer 1

Sorunuzu tam olarak anlayamadık.

Ancak, görüntünün genişliğini ve yüksekliğini elde etmek için javascript'i kullanabilirsiniz. tuvale görüntü düşürme sırasında

ve

/Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image). 
context.drawImage(img_elem, dx, dy, dw, dh); 

içine geçmektedir.

yoksa seni doğru anladıysam, sen getComputedStyle yöntemi kullanabilirsiniz

http://jsfiddle.net/jjUHs/

Answer 2

yardımcı olur bu kontrol edin.

var object = document.getElementById(el); 
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width"); 

Answer 3

HTMLImageElement için bu iki özellik naturalWidth ve naturalHeight sahiptir. Bunları kullan. içinde

gibi: olay dinleyicisi tanımlanır sonra kaynağını belirlemek için akıllıca olacaktır

var img = new Image(); 

img.addEventListener('load', function() { 
    // once the image is loaded: 
    var width = img.naturalWidth; // this will be 300 
    var height = img.naturalHeight; // this will be 400 
    someContext.drawImage(img, 0, 0, width, height); 
}, false); 

img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten 

, burada olan Phrogz en keşif bkz: Should setting an image src to data URL be available immediately?

Answer 4

Sen genişlik/yükseklik alamıyor görüntü olmuştur önce yüklendi.

gibi bir şey deneyin: görüntü komut çalıştırılmadan önce yüklenmiş olup olmadığını

// create new Image or get it right from DOM, 
// var img = document.getElementById("myImage"); 
var img = new Image(); 

img.onload = function() { 
    // this.width contains image width 
    // this.height contains image height 
} 

img.src = "image.png"; 

neyse Onload tetiklenmeyecek. Sonunda, html'yi kopyalayabilirsiniz: html <img src="test.jpg" onload="something()">