Question

171

Blob object to base64 in JavaScript

rated 0 times [ 177] [ 6] / answers: 1 / hits: 34625 / 12 Years ago, tue, august 7, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorac

Add To Favorites

Follow

Total Points: 262

Total Questions: 82

Total Answers: 97

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alorac questions

1 Invalid Form Body in Discord.js ban command

Sat, Oct 10, 20, 00:00, 4 Years ago

1 How to change URL without refreshing the page?

Tue, Sep 22, 20, 00:00, 4 Years ago

1 How to Query a Model based on its Relation in Strapi

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How can I access react redux state in index.js file?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Alpine.js - nested components

Sun, May 17, 20, 00:00, 4 Years ago

View All

answered 12 Years ago carl · Accepted Answer

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

            }

        }

    }