image - Blob object to base64 in JavaScript - Stack Overflow

admin管理员组

文章数量:1178545

I am trying to implement a paste handler to get an image from user's clipboard. I want this to run only on Google Chrome, I am not worried with other browsers.

This is a part of a method that I found on Internet and I am trying to adapt it.

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

The method works and I can show the image if I use my "source" as the src of a image object. The problem is that the image source in google chrome will be something like this: blob:http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9

I need to send this image to the server, so I want to convert it to a base64 version. For example:

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=

In the first piece of code I have a blob object representing the file. I have tried a couple of methods but I am not getting the correct representation. How I can use it to create a base64 representation?

I am trying to implement a paste handler to get an image from user's clipboard. I want this to run only on Google Chrome, I am not worried with other browsers.

This is a part of a method that I found on Internet and I am trying to adapt it.

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

The method works and I can show the image if I use my "source" as the src of a image object. The problem is that the image source in google chrome will be something like this: blob:http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9

I need to send this image to the server, so I want to convert it to a base64 version. For example:

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=

In the first piece of code I have a blob object representing the file. I have tried a couple of methods but I am not getting the correct representation. How I can use it to create a base64 representation?

• javascript
• image
• google-chrome
• base64
• blob

Share Improve this question Follow edited Jan 25, 2019 at 12:52 brasofilo 26.1k1515 gold badges9393 silver badges185185 bronze badges asked Aug 7, 2012 at 17:20 RafaelRafael 1,65533 gold badges1717 silver badges2525 bronze badges 6

• stackoverflow.com/questions/7650587/… – jcolebrand Commented Aug 7, 2012 at 17:25
• stackoverflow.com/questions/6431281/… – jcolebrand Commented Aug 7, 2012 at 17:27
• jcolebrand I tried to use the base64 encode from the other question but i am getting this error: Exception: TypeError: Object #<Blob> has no method 'replace' Maybe the blob type is different, so i dont think my question is duplicated.. because the others answers could not help me in this case. Or maybe im missing something... – Rafael Commented Aug 7, 2012 at 18:57
• I didn't say they were duplicates, I merely linked other issues others had had. Mostly to encourage discussion. Also because I have no clue. – jcolebrand Commented Aug 7, 2012 at 19:02
• Oh, ok. Thanks for the help and your time, unfortunately it seems that my problem is slightly different from those you showed. – Rafael Commented Aug 7, 2012 at 19:08

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 35

Nick Retallack's answer at this page How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+? does exactly what I want.

So the new piece of code is :

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
            }
        }
    }

本文标签： imageBlob object to base64 in JavaScriptStack Overflow