szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular - Blob képek megjelenítése ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Adatbázisban tárolt képek =====

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
===== Csak kép van tárolva =====

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.

==== DomSanitizer ====

<code javascript>
import { DomSanitizer } from '@angular/platform-browser';

//...

  constructor(private sanitizer: DomSanitizer) { }
  
//...
  
  let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
</code>

==== Base64 vissza-kódoló ====

Írhatunk sajátot. 

<code javascript>
  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;
  }
</code>

Ezt át kell alakítani URL-re:

<code javascript>
let blobUrl = URL.createObjectURL(blobImg);
</code>

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

<code javascript>
let url = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
</code>


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

<code javascript>
  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;
  }
</code>


==== Base64 kódoló npm csomagból ====

  npm install --save-dev blob-util

Használat:

<code javascript>
import { base64StringToBlob } from 'blob-util';

//...

let blobImg = base64StringToBlob(data, 'image/png');
</code>

A data, amit REST API szervertől kaptunk.


<code javascript>
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;
  }

</code>

==== HTML sablon ====

<code html>
        <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>
</code>


==== Employee komponens ====

<code javascript 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;
  }
  
}

</code>


<code javascript 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>
</code>


===== MIME típussal tárolt kép megjelenítése =====

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


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

<code>
data:image/png;base64,iVCARw0KC...
</code>

Csak egyszerűen:

<code html>
<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>
</code>


Vagy:
<code html>
<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>
</code>

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