Angular - Blob képek megjelenítése

• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Ha képeket adatbázisban tároljuk azt bináris formátumban, blobként tesszük. Ha egy REST API-ból kapunk egy ilyen adatot azt Base64 kódolva kapjuk meg.

A képek tárolhatók:

• blobként magukban Base64 kódolva
• blobként Base64 kódolva, MIME típus megadásával

Szükségünk van egy vissza-kódólra, ami a Base64 kódolt képet átalakítja szimpla Blob formátumba. A Blobból blobUrl-t készítünk, a blobUrl-t Angularban biztonságossá kell tenni dinamikus tartalom beillesztésére.

import { DomSanitizer } from '@angular/platform-browser';
 
//...
 
  constructor(private sanitizer: DomSanitizer) { }
 
//...
 
  let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);

Írhatunk sajátot.

  base64ToBlob(image: string) {
    let binaryImg = atob(image);
    let length = binaryImg.length;
    let ab = new ArrayBuffer(length);
    let ua = new Uint8Array(ab);
 
    for (var i = 0; i < length; i++) {
        ua[i] = binaryImg.charCodeAt(i);
    }
 
    let blobImg = new Blob([ab], { type: 'image/png' });    
    return blobImg;
  }

Ezt át kell alakítani URL-re:

let blobUrl = URL.createObjectURL(blobImg);

JavaScriptben már használható, de Angularban még biztonságossá kell tenni:

let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);

A következő függvényben már be van építve az URL konvertálás is:

  base64ToUrl(image: string) {
    let binaryImg = atob(image);
    let length = binaryImg.length;
    let ab = new ArrayBuffer(length);
    let ua = new Uint8Array(ab);
 
    for (var i = 0; i < length; i++) {
        ua[i] = binaryImg.charCodeAt(i);
    }
 
    let blobImg = new Blob([ab], { type: 'image/png' });    
    let blobUrl = URL.createObjectURL(blobImg);
    let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
    return url;
  }

npm install --save-dev blob-util

Használat:

import { base64StringToBlob } from 'blob-util';
 
//...
 
let blobImg = base64StringToBlob(data, 'image/png');

A data, amit REST API szervertől kaptunk.

import { base64StringToBlob } from 'blob-util';
 
//...
 
  b64ToUrl(data: string) {
    let blobImg = base64StringToBlob(data, 'image/png');
    let blobUrl = URL.createObjectURL(blobImg);
    let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
    return url;
  }

        <tr *ngFor="let emp of employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
            <td>
                <img [src]="b64ToUrl(emp.image)">
            </td>
        </tr>

emplyee.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../shared/api.service';
 
import { base64StringToBlob } from 'blob-util';
import { DomSanitizer } from '@angular/platform-browser';
 
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
 
  employees: any;
 
  constructor(
    private api: ApiService, 
    private sanitizer: DomSanitizer
    ) { }
 
  ngOnInit(): void {
    this.getEmployees();
  }
 
  getEmployees() {
    this.api.getEmployees().subscribe({
      next: data => {       
        this.employees = data;
      },
      error: err => {}
    })
  }
 
  b64ToUrl(data: string) {
    let blobImg = base64StringToBlob(data, 'image/png');
    let blobUrl = URL.createObjectURL(blobImg);
    let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
    return url;
  }
 
}

emplyee.component.html

<h1>Dolgozók</h1>
 
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Név</th>
            <th>Település</th>
            <th>Fizetés</th>
            <th>Kép</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
            <td>
                <img [src]="b64ToUrl(emp.image)">
            </td>
        </tr>
    </tbody>
 
</table>

Nincs szükség semmilyen konvertálásra.

A Blobban a MIME típus bejegyzés, például ilyen lehet:

data:image/png;base64,iVCARw0KC...

Csak egyszerűen:

<tr *ngFor="let emp of employees">
    <td>{{emp.id}}</td>
    <td>{{emp.name}}</td>
    <td>{{emp.city}}</td>
    <td>{{emp.salary}}</td>
    <td>
        <img src={{emp.image}}>
    </td>
</tr>

Vagy:

<tr *ngFor="let emp of employees">
    <td>{{emp.id}}</td>
    <td>{{emp.name}}</td>
    <td>{{emp.city}}</td>
    <td>{{emp.salary}}</td>
    <td>
        <img [src]="emp.image">
    </td>
</tr>

Böngésző megjeleníti az src attribútumnak megadott blobot, ha előtt szerepel a MIME típus.