क्या हम कैनवास के माध्यम से असली छवि आकार प्राप्त कर सकते हैं?

Question

छवि टैग में, यदि हम चौड़ाई और ऊंचाई की संपत्ति की आपूर्ति नहीं करते हैं, तो छवि की चौड़ाई और ऊंचाई को पुनर्प्राप्त करते समय हमें कुछ भी नहीं मिलेगा। मैं एक छवि लोड करने के लिए कैनवास तत्व का उपयोग कर रहा हूं और इसे आनुपातिक रूप से स्केल कर रहा हूं। ऐसा करने के लिए, मुझे वास्तविक छवि आकार प्राप्त करना होगा। क्या एचटीएमएल 5 में ऐसा करना संभव है?

Answer 1

आपके प्रश्न को पूरी तरह से समझ में नहीं आया।

लेकिन आप छवि की चौड़ाई और ऊंचाई प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

और फिर इसे

/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); 

में पारित जबकि कैनवास पर छवि ड्राइंग।

या इस जाँच अगर यह मदद करता है

http://jsfiddle.net/jjUHs/

Answer 2

अगर मैं तुम्हें सही ढंग से समझ, आप getComputedStyle विधि का उपयोग कर सकते हैं।

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

Answer 3

HTMLImageElement इस के लिए दो गुण, naturalWidth और naturalHeight है। उन का प्रयोग करें।

के रूप में:

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 

यह स्रोत सेट करने के लिए जाने के बाद ही घटना श्रोता परिभाषित किया गया है बुद्धिमान है, कि यहां पर Phrogz के अन्वेषण देखें: Should setting an image src to data URL be available immediately?

Answer 4

आप चौड़ाई/ऊंचाई प्राप्त नहीं कर सकता से पहले छवि कर दिया गया है लदा हुआ।

की तरह कुछ का प्रयास करें: यदि छवि स्क्रिप्ट निष्पादन से पहले लोड किया गया है

// 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"; 

किसी भी तरह ऑनलोड सक्रिय नहीं होगा। आखिरकार आप एचटीएमएल <img src="test.jpg" onload="something()">