主页 / 问题 / 1104795
Accepted
skatch mast
Asked:2020-04-03 17:02:38 +0000 UTC2020-04-03 17:02:38 +0000 UTC

如何使用 fetch 将图像异步解析为 base64？

  • 772

有这样的功能并且有效）

  function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var reader = new FileReader();
          reader.onloadend = function() {
            callback(reader.result);
          }
          reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

但我写异步代码

let url = 'https://somethingoffreedom.com/wp-content/uploads/2019/01/Kelingking-beach-Nusa-Penida-Bali-travel-tips.jpg';


async function setBaseImg () {
  const response = await fetch(url);
  const data     = await response.blod();
  let   reader   = await new FileReader();
  
  
  await document.querySelectorAll('img')[0].setAttribute('src', reader.readAsDataURL(data) )
}


setBaseImg();
<img src="" alt="">

但它不起作用，我怎样才能恢复它以便将base64加载到src中 ，或者如果不可能，我如何异步应用toDataURL函数 ？

javascript

2 个回答

  1. let url =
  "https://somethingoffreedom.com/wp-content/uploads/2019/01/Kelingking-beach-Nusa-Penida-Bali-travel-tips.jpg";


function setBase64ToImage(result) {
  const element = document.querySelector("img");
  element.setAttribute('src', result);
  console.log(element);
}

async function loadImg() {
  const response = await fetch(url);
  const data = await response.blob();

  let reader = new FileReader();
  reader.onloadend = function() {
    setBase64ToImage(reader.result)
  }

  reader.readAsDataURL(data);
}

loadImg();
    <img src="" alt="Image"/>

    • 1
  2. Best Answer

    FileReader只有带有回调的方法，所以带有

    let reader = await new FileReader();
...
, reader.readAsDataURL(...)

    不能工作。

    要解决它，您需要保持回调方法原样：

    let url = 'https://somethingoffreedom.com/wp-content/uploads/2019/01/Kelingking-beach-Nusa-Penida-Bali-travel-tips.jpg';

async function setBaseImg() {
  const response = await fetch(url);
  const data = await response.blob();

  var reader = new FileReader();
  reader.onloadend = function() {
    document.querySelectorAll('img')[0].setAttribute('src', reader.result)
  }
  reader.readAsDataURL(data);
}


setBaseImg();

    或者在返回 Promise 的函数中使用回调包装工作

    let url = 'https://somethingoffreedom.com/wp-content/uploads/2019/01/Kelingking-beach-Nusa-Penida-Bali-travel-tips.jpg';

function readAsync(data) {
    return new Promise(r=>{
        var reader = new FileReader();
        reader.onloadend = function() {
          r(reader.result)
        }
        reader.readAsDataURL(data);        
    });
}

async function setBaseImg() {
  const response = await fetch(url);
  const data = await response.blob();
  const dataUrl = await readAsync(data);

  document.querySelectorAll('img')[0].setAttribute('src', dataUrl);
}

setBaseImg();

    此外，您不需要在任何地方添加它们，await只需要在必要时添加它们。

    • 1

相关问题