छवि से HTML 5 फ़ाइल कैसे बनाएं (<img>) पहले ही लोड हो चुकी है?

Question

हाय मैं एक पृष्ठ जहाँ मैं उपयोगकर्ता के प्रोफ़ाइल छवि है कि इस तरह भरी हुई है दिखाने के लिए:

$ ("# imgProfile") attr ('src', 'http://myserver/user.png')

अब मैं प्रस्तुत करने की आवश्यकता। एचटीएमएल 5 फाइल एपीआई का उपयोग करके यह छवि, लेकिन ऐसा करने के लिए मुझे पहले अपनी छवि को फ़ाइल एपीआई में परिवर्तित करने की आवश्यकता है। इंटरनेट पर देखे गए सभी नमूने इनपुट प्रकार = "फ़ाइल" के साथ मिलकर काम करते हैं, लेकिन मेरे पास पहले से ही वह छवि है, मैं स्थानीय कंप्यूटर से छवि नहीं चुन रहा हूं।

सभी इनपुट प्रकार = तत्व "फाइल" से एक https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications उपयोग फ़ाइल API जैसे उदाहरण

Answer 1

फ़ाइल एपीआई साथ भ्रमित नहीं होना है, अगर छवि पहले से ही सर्वर में मौजूद है, तुम सब से के लिए छोड़ दिया

<img src="serverAddress\yourImage.png" alt="Image Something" /> 

Answer 2

फ़ाइल आपके सर्वर पर पहले से ही है: ऐसा चित्र URL के लिए एक संदर्भ के साथ एक <img> टैग घोषित करने के लिए है और यह प्रदर्शित करने के लिए है। आप इसका उपयोग कर सकते हैं, Yair Nevet के उत्तर के अनुसार।

यदि आप वास्तव में इसे File ऑब्जेक्ट बनाना चाहते हैं, तो आप इसका उपयोग कर सकते हैं (मुझे नहीं पता कि यह काम करता है)।

var getFilelikeBlobFromImageElement = (function closure() { 
     var canvasElement = document.createElement("canvas"); 

     return function(imageElement) { 
       canvasElement.width = imageElement.width; 
       canvasElement.height = imageElement.height; 
       var canvasContext = canvasElement.getContext("2d"); 
       canvasContext.drawImage(imageElement, 0, 0); 

       var imageData = canvasContext.getImageData(0, 0, imageElement.width, imageElement.height).data; 
       var buffer = new Uint8Array(imageData.length); 
       for(var index = 0; index < imageData.length; index++) 
        buffer[index] = imageData[index]; 

       var imageBlob = new Blob(buffer); 
       imageBlob.lastModifiedDate = new Date(); 
       imageBlob.name = /\/([^\/]+)$/.exec(imageElement.src)[1]; 

       return imageBlob; // A `File`-like `Blob` object. 
      }; 
    })(); 

उपयोग:

getFilelikeBlobFromImageElement(document.getElementById("imgProfile")); 

To get the Blob from a <canvas>

To make a BlobFile-like