动态创建数据 URI？

Question

是否有脚本（javascript /客户端）。动态创建数据 URI。现在我使用在线 base64 创建器创建数据 URI。然后将输出放入 css 文件中。但是当我改变图像时。要做到这一点需要做很多工作。有一个脚本可以为我做到这一点吗？

Answer 1

现代浏览器现在对base64编码和解码有很好的支持。有两个函数分别用于解码和编码 Base64 字符串：

• atob() 解码一串 base-64 数据
• btoa() 从二进制数据“字符串”创建一个 base-64 编码的 ASCII 字符串

这让您可以轻松创建数据 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) );

Answer 3

一种方法是创建一个对象的 Blob ，并且然后使用 URL.createObjectURL()

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


console.log(a)