TypeScript将图像URL转换为base64编码的字符串失败 [英] Typescript convert an image url to base64 encoded string fails

问题描述

我想根据给定的URL将图像转换为base 64格式.

I would like to convert an image to base 64 format, given its URL.

下面是我要达到的目的的方法:

Below is my approach in order to achieve that:

getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

// Using the function above to do the conversion (an image to base 64 format from its URL);
this.getBase64Image('https://live.mystocks.co.ke/research/images/bamburi.jpg');

失败.

我在做什么错，我该如何解决?

What am I doing wrong and how can I achieve it?

推荐答案

您无法从字符串中获取图像信息，需要首先加载该图像，因此需要返回Observable或Promise:

You cannot get image information from a string, you need to load that image first so you'll need to return an Observable or a Promise:

getBase64Image(img:HTMLImageElement) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}



getBase64ImageFromURL(url:string) {
  return Observable.create((observer:Observer<string>) => {
    let img = new Image();
    img.src = url;
    if (!img.complete) {
      img.onload = () => {
        observer.next(getBase64Image(img));
        observer.complete();
      };
      img.onerror = (err) => {
        observer.error(err);
      };
    } else {
      observer.next(getBase64Image(img));
      observer.complete();
    }
  });
}

这篇关于TypeScript将图像URL转换为base64编码的字符串失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！