Создать данные URI на лету?

Question

Есть ли скрипт (на стороне javascript / client). Это создает данные URI на лету. Теперь я создаю URI данных с помощью онлайн-создателя base64. И затем поместите этот вывод в файл CSS. Но когда я меняю изображения. Это большая работа, чтобы сделать это. Есть ли сценарий, который может сделать это для меня?

Answer 1

Современные браузеры теперь имеют хорошую поддержку для кодирования и декодирования base64 .Есть две функции соответственно для декодирования и кодирования строк base64:

• atob() декодирует строку данных base-64
• btoa() создает ASCII-строку в кодировке base-64 из "строки" двоичных данных

Это позволяет легко создавать данные URI, например

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

Как полное решение для вашего сценария, вы можете использовать fetch, чтобы получить blob представление вашего изображения, а затем использовать FileReader, чтобы преобразовать BLOB-объект в base64 представление

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