Ionic 2：将URL转换为base 64图像

Question

我有图片网址，例如：https : //lh3.googleusercontent.com/-lLC-FsscD40/AAAAAAAAAAI/AAAAAAAAAAA/AMp5VUoSrLythVKtt5Skm9zIUg4uyxnNCw/s48-c-mo/photo.jpg

需要将url转换为base 64图像，我的代码不起作用，请帮助：

convertToDataURLviaCanvas(url){
    return new Promise( (resolve, reject) => {

        let img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;

        var canvas = <HTMLCanvasElement>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/jpeg");
        resolve(dataURL);

    });
}

Answer 1

这是获取图像的base64数据的方法：

  ngOnInit() {
    let imageUrl = 'https://lh3.googleusercontent.com/-lLC-FsscD40/AAAAAAAAAAI/AAAAAAAAAAA/AMp5VUoSrLythVKtt5Skm9zIUg4uyxnNCw/s48-c-mo/photo.jpg';

    this.getBase64ImageFromURL(imageUrl).subscribe(base64data => {
      console.log(base64data);
      this.base64Image = 'data:image/jpg;base64,'+base64data;
    });
  }

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

  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,/, "");
  }

堆栈闪电的工作链接：演示