JS - बेस 64 कोड से छवि की चौड़ाई और ऊंचाई प्राप्त करें

Question

मेरे पास एक base64 img एन्कोडेड है जो आप यहां पा सकते हैं । मैं इसकी ऊंचाई और चौड़ाई कैसे प्राप्त कर सकता हूं?

Answer 1

var i = new Image(); 

i.onload = function(){
 alert( i.width+", "+i.height );
};

i.src = imageData; 

Comments

सिर्फ भयानक, आकार की जांच करने में आधा समय लगता है, बहुत बहुत धन्यवाद!

— बमबारी

बहुत बुरा है कि यह एक अतुल्यकालिक प्रक्रिया है।

— कोएन डेमन

@CoenDamen हां। मुझे समकालिक प्रक्रिया की भी आवश्यकता है।

— 1.21 गीगावाट

आप बहुत बढ़िया हैं

— Valdrinium

मैं यह भी जोड़ना चाहूंगा कि यहां आदेश बहुत महत्वपूर्ण है। यदि आप इसे दूसरे तरीके से करते हैं (लोड होने से पहले src) तो आप इस घटना को याद कर सकते हैं। देखें: stackoverflow.com/a/2342181/4826740

— अधिकतम

Answer 2

तुल्यकालिक उपयोग के लिए बस इसे इस तरह वादे में लपेटें:

function getImageDimensions(file) {
  return new Promise (function (resolved, rejected) {
    var i = new Image()
    i.onload = function(){
      resolved({w: i.width, h: i.height})
    };
    i.src = file
  })
}

तब आप तुल्यकालिक कोडिंग शैली में डेटा प्राप्त करने के लिए प्रतीक्षा का उपयोग कर सकते हैं:

var dimensions = await getImageDimensions(file)

Comments

हालांकि यह अभी भी अतुल्यकालिक है। सिंटैक्टिक शुगर का उपयोग करना।

— जस्टावॉच

'naturalWidth' और 'naturalHeight' क्या बेहतर विकल्प हैं? stackoverflow.com/questions/28167137/…

— Crashalot

Answer 3

मैंने पाया कि उपयोग करना .naturalWidthऔर .naturalHeightसबसे अच्छा परिणाम था।

const img = new Image();

img.src = 'https://via.placeholder.com/350x150';

img.onload = function() {
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;

  console.log('imgWidth: ', imgWidth);
  console.log('imgHeight: ', imgHeight);
};

यह केवल आधुनिक ब्राउज़रों में समर्थित है। http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

<img>उस छवि के साथ एक छिपा बनाएँ और फिर jquery .net () और का उपयोग करें। ऊंचाई()

$("body").append("<img id='hiddenImage' src='"+imageData+"' />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:"+width+" height:"+height);

यहां परीक्षण करें: FIDDLE

छवि शुरू में छिपी हुई नहीं है। यह बनाया जाता है, फिर आप चौड़ाई और ऊंचाई प्राप्त करते हैं और फिर इसे हटा देते हैं। यह बड़ी छवियों में एक बहुत ही कम दृश्यता का कारण हो सकता है इस मामले में आपको छवि को दूसरे कंटेनर में लपेटना होगा और उस कंटेनर को छिपाया जाना चाहिए जो छवि ही नहीं है।

---

एक और फ़िडल जो कि gp.'s anser के अनुसार डोम में नहीं जुड़ता है: यहाँ

Comments

var i = नई छवि (); i.src = imageData; setTimeout (फ़ंक्शन () {चेतावनी ("चौड़ाई:" + i.width + "ऊंचाई:" + i.height);}; 100);

— जी.पी.

यह केवल फिक्स की जरूरत है क्योंकि jsfiddle की प्रकृति के कारण, आप उस प्रारंभिक 0 चौड़ाई और ऊंचाई की समस्या को ठीक करने के बजाय onDomReady पर onLad को बदल सकते हैं। कोड मानता है कि आप इस फ़ंक्शन को अपने काम में कहीं बुलाते हैं जहां दस्तावेज़ पहले से लोड है।

— देसू

लगता है कि आपकी बात यह थी, कि आपको चौड़ाई और ऊंचाई पाने के लिए डोम में कुछ भी जोड़ने की आवश्यकता नहीं है। आपके सुझावों को दर्शाने के लिए उत्तर को संशोधित करेगा।

— देसु