Create data URIs on the fly?

Question

Is there a script (javascript / client side). That create data URIs on the fly. Now i create data URIs with a online base64 creator. And then put that output in the css file. But when i changing the images. Its a lot of work to do it. Is there a script, that can do it for me.?

Answer 1

The modern browsers now have good support for base64 encoding and decoding. There are two functions respectively for decoding and encoding base64 strings:

• atob() decodes a string of base-64 data
• btoa() creates a base-64 encoded ASCII string from a "string" of binary data

This let's you create data uri's easily i.e

var longText = "Lorem ipsum....";
var dataUri = "data:text/plain;base64," + btoa(longText);
//a sample api expecting an uri
d3.csv(dataUri, function(parsed){

});

Answer 2

As a complete solution to your scenario, you can use fetch to get a blob representation of your image, and then use FileReader to convert the blob in its base64 representation

// get an image blob from url using fetch
let getImageBlob = function(url){
  return new Promise( async resolve=>{
    let resposne = await fetch( url );
    let blob = resposne.blob();
    resolve( blob );
  });
};

// convert a blob to base64
let blobToBase64 = function(blob) {
  return new Promise( resolve=>{
    let reader = new FileReader();
    reader.onload = function() {
      let dataUrl = reader.result;
      resolve(dataUrl);
    };
    reader.readAsDataURL(blob);
  });
}

// combine the previous two functions to return a base64 encode image from url
let getBase64Image = async function( url ){
  let blob = await getImageBlob( url );
  let base64 = await blobToBase64( blob );
  return base64;
}

// test time!
getBase64Image( 'http://placekitten.com/g/200/300' ).then( base64Image=> console.log( base64Image) );

Answer 3

One way is to make a Blob of an object, and then use URL.createObjectURL()

let a = URL.createObjectURL(new Blob([JSON.stringify({whatever: "String..."}, null, 2)]))


console.log(a)