जावास्क्रिप्ट: ब्लॉब ऑब्जेक्ट बेस 64

Question

मैं उपयोगकर्ता के क्लिपबोर्ड से एक छवि प्राप्त करने के लिए पेस्ट हैंडलर को लागू करने की कोशिश कर रहा हूं। मैं इसे केवल Google क्रोम पर चलाने के लिए चाहता हूं, मैं अन्य ब्राउज़रों से चिंतित नहीं हूं।

यह इंटरनेट पर मिलने वाली विधि का एक हिस्सा है और मैं इसे अनुकूलित करने की कोशिश कर रहा हूं।

// Get the items from the clipboard 
var items = e.clipboardData.items; 
    if (items) { 
    // Loop through all items, looking for any kind of image 
     for (var i = 0; i < items.length; i++) { 
      if (items[i].type.indexOf("image") !== -1) { 
       // We need to represent the image as a file, 
       var blob = items[i].getAsFile(); 
       // and use a URL or webkitURL (whichever is available to the browser) 
       // to create a temporary URL to the object 
       var URLObj = window.URL || window.webkitURL; 
       var source = URLObj.createObjectURL(blob); 
       createImage(source); 
       } 
      } 
     } 

विधि काम करता है और अगर मैं एक छवि वस्तु के स्रोत के रूप में अपने "स्रोत" का उपयोग मैं छवि दिखा सकते हैं। समस्या यह है कि Google क्रोम में छवि स्रोत कुछ ऐसा होगा: blob:http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9

मुझे यह छवि सर्वर पर भेजने की आवश्यकता है, इसलिए मैं इसे बेस 64 संस्करण में परिवर्तित करना चाहता हूं। उदाहरण के लिए:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArgAAAAjCAIAAADwnO7RAAAKMWlDQ1BJQ0MgUHJvZmlsZQAASImdlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XM...iCIBWnh+P9w9C+9eMzvhCl1iOElK09ruc2wqGhfH/uKEV30FlJkmRZJklydFuW/FdwhYFCkCBBggQJEuS/gWC4FCRIkCBBggQZlmCgECRIkCBBggQZlmCgECRIkCBBggQZFmzhwoXXWoYgQYIECRIkyHUK5vF4rrUMQYIECRIkSJDrFHLktYOCBAkSJEiQIP/NkLt3777WMgT5thLstwoSJEiQ7zxYsEUhyJWxbdu2u++++1pLESRIkCBBvl6Csx6CBAkSJEiQIMPy3dkMOsg3T7A5KkiQIEG+8wQDhSBXTjBQCBIkSJDvPMGuhyBBggQJEiTIsFwXLQr9H6bOjtYeP2mONbOj2Hut9y6/x+nlJSBCQnXkgG3Brh8Q4lqbOpAmPDqUGShex9lPDlfB4sU5I97b/8kuevygYUgYsAksAPg9fkbDQN/e1kNvVw76nfYeiTCG6sjLd5fv58rsFmxRCBIkSJDvPP8f+HtxbDVRPI8AAAAASUVORK5CYII= 

कोड के पहले भाग में मेरे पास फ़ाइल का प्रतिनिधित्व करने वाला एक ब्लॉब ऑब्जेक्ट है। बेस 64 प्रतिनिधित्व बनाने के लिए मैं इसका उपयोग कैसे कर सकता हूं? मैंने कुछ तरीकों की कोशिश की है लेकिन मुझे सही प्रतिनिधित्व नहीं मिल रहा है।

कृपया, कोई भी मेरी मदद कर सकता है?

Answer 1

मैं किसी भी समस्या के साथ इस पृष्ठ पर आने पर ही अपने स्वयं के प्रश्न का उत्तर दूंगा।

इस पृष्ठ पर निक रेटलैक का जवाब How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+? वही करता है जो मैं चाहता हूं।

तो कोड के नए टुकड़ा है:

var items = e.clipboardData.items; 
if (items) { 
// Loop through all items, looking for any kind of image 
    for (var i = 0; i < items.length; i++) { 
     if (items[i].type.indexOf("image") !== -1) { 
      // We need to represent the image as a file, 
      var blob = items[i].getAsFile(); 

      var reader = new FileReader(); 
       reader.onload = function(event){ 
        createImage(event.target.result); //event.target.results contains the base64 code to create the image. 
       }; 
       reader.readAsDataURL(blob);//Convert the blob from clipboard to base64 
      } 
     } 
    }