将图像 url 转换为 Angular 中的 base64

Question

我正在努力尝试将给定图像 url 转换为 base64...在我的例子中，我有一个带有图像路径的字符串

var imgUrl = `./assets/logoEmpresas/${empresa.logoUrl}`

如何直接将给定图像 url 转换为 base64？...我试过了 post。

但是这个 post 是从表单获取图像...我该如何调整它？

Answer 1

您可以使用它来获取 base64 图像

async function 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);
  })
}

然后这样称呼它

getBase64ImageFromUrl('your url')
    .then(result => testImage.src = result)
    .catch(err => console.error(err));

Answer 2

works like charm in pdfMake and angular

您可以使用此函数创建生成 base64 图像

    toDataURL = async (url) => {
    console.log("Downloading image...");
    var res = await fetch(url);
    var blob = await res.blob();

    const result = await new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.addEventListener("load", function () {
        resolve(reader.result);
      }, false);

      reader.onerror = () => {
        return reject(this);
      };
      reader.readAsDataURL(blob);
    })

    return result
  };

and then call it like this

imageSrcString = await this.toDataURL(imageSrc)

Answer 3

如果我们在 Angular 中这样做，我们不妨利用 HttpClient and a Service。

让我们继续将 HttpClientModule 添加到我们的相关模块中，我们需要它才能使用 HttpClient。

@NgModule({
  imports: [HttpClientModule],
  ...
})
export class AppModule {}

然后让我们创建一个通用的Image Service，然后要求Angular将HttpClientinject加入到我们的Service中。

@Injectable()
export class ImageService {
  constructor(private http: HttpClient) { }
}

一旦完成，我们实际上可以在我们的服务中创建我们的函数

imageUrlToBase64(urL: string) {
  return this.http.get(urL, {
      observe: 'body',
      responseType: 'arraybuffer',
    })
    .pipe(
      take(1),
      map((arrayBuffer) =>
        btoa(
          Array.from(new Uint8Array(arrayBuffer))
          .map((b) => String.fromCharCode(b))
          .join('')
        )
      ),
    )
}

当我们使用 http.get and provide arraybuffer as our response type, Angular interprets the body of our request as an ArrayBuffer. What that means is that we'll now have our image as an array of bytes. All we need to do is then convert our ArrayBuffer to a base64 string. If you'd like to view alternative options, this SO Question 有很好的答案。

// taken from above
map(
  btoa(
    Array.from(new Uint8Array(arrayBuffer))
    .map((b) => String.fromCharCode(b))
    .join('')
  )
)

现在功能已经完成，我们可以转移到用法：

@Component()
export class AppComponent {
  base64Image: string;
  constructor(private imageService: ImageService) {
      this.imageService.imageUrlToBase64('https://picsum.photos/200/300').subscribe(
          base64 => {
              this.base64Image = base64
      })
  }
}

我们现在可以访问 base64 格式的图像

将图像 url 转换为 Angular 中的 base64

Converting an Image url to base64 in Angular

javascript

single-page-application

typescript

angular

angular8

如果我们在 Angular 中这样做，我们不妨利用 HttpClient and a Service。