如何将图像 url 转换为 base64 字符串？答案

【问题标题】：How can I convert image url to base64 string?如何将图像 url 转换为 base64 字符串？
【发布时间】：2020-12-22 13:01:09
【问题描述】：

我遇到了一个问题，我需要转换一些图像，这些图像来自 url，然后转换为 base64。比如这个图片的url如何

https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg

可以在base64中转换。

我知道有图像编码器网站，比如

https://www.base64-image.de/

但我需要在我的代码中动态执行。

【问题讨论】：

这能回答你的问题吗？ Converting an image to base64 in angular 2
不，先生。我尝试了所有解决方案，但无法访问

标签： angular typescript base64 jspdf

【解决方案1】：

这对我有用：

TS FILE
base64ImageString;

async getBase64ImageFromUrl(imageUrl) {
    var res = await fetch(imageUrl);
    var blob = await res.blob();
    return new Promise((resolve, reject) => {
      var reader  = new FileReader();
      reader.addEventListener("load", function () {
          resolve(reader.result);
      }, false);
      reader.onerror = () => {
        return reject(this);
      };
      reader.readAsDataURL(blob);
    })
  }


ngOnInit() {
   this.getBase64ImageFromUrl(this.userData.organization_logo).then(base64 => {
      this.base64ImageString = base64;
    })
}

HTML

  <img src='{{ base64ImageString }}' class="logo" />

【讨论】：

【解决方案2】：

你可以这样做，如果img url不是同一个来源，也许你需要解决原点交叉

const image = new Image();
image.onload = function(){
  const width = image.width;
  const height = image.height;

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  const base64 = canvas.toDataURL({format: "png"})
  console.log(base64);
}
  
image.src = 'https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg';

【讨论】：