Javascript 怎么将远程图片转成Bolo

Question

想通过转换成Base64

var reader = new FileReader();
reader.readAsDataURL(Bolo); //这个位置要传Bolo 对象
reader.onload = function(e){
    console.log(e.target.result);
    
}

MDN 有这种方式但不知道怎么补全

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

http://runjs.cn/detail/4kmutrhc

Answer 1

xhr.responseType = "blob"

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://i2.buimg.com/500978/659e935d63290eb4.jpg"); 
xhr.responseType = "blob";
xhr.onload = function() 
{
    document.getElementsByTagName("body")[0].innerHTML = xhr.response;
}
xhr.send();

fetch("https://i2.buimg.com/500978/659e935d63290eb4.jpg").then((response) => {
      if (response.ok) {
          return response.blob()
      }
     }).then((data) => {
         document.body.innerHTML = `<img src="${window.URL.createObjectURL(data)}">`
     })

Answer 2

这个需要后端写接口

Answer 3

直接获取 Blob 不大可能做到，只有用 File 控件或者拖拽才能获取到 File 对象。

可以先用 canvas 转为 dataURL，然后再从 dataURL 转为 Blob，但是这样做不是原来的 Blob 对象了。

不借助后端的话，我觉得不大可能做到。

Answer 4

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://i2.buimg.com/500978/659e935d63290eb4.jpg"); 

xhr.responseType = "blob";

xhr.onload = function() 
{
    document.getElementsByTagName("body")[0].innerHTML = xhr.response;
}
xhr.send();

ans

[object Blob]