Bonjour,

J'ai débuté une application au moyen d'Ionic 4, Angular 8 et Typescript.

Je cherche à pixeliser dynamiquement des images. J'ai actuellement une fonction qui récupère imageID et crée un canvas par dessus (et l'élargit entraînant ainsi une pixellisation) cela marche parfaitement dans le cas d'une image locale mais je n'arrive pas à le faire sur mon tableau d'images lorsque je récupère celui-ci asynchrone:

image.component.ts

 ngOnInit() {
this.getImageList(); // Load the Array from Firebase
    this.drawPixelateImage('imageAny', 0.2, 'canvasImage', 120, 250);
}

 /**
  * Draw a Pixelate canvas on top of an image.
  */
  drawPixelateImage(imageName: string, pixelSize: number, canvasName: string, canvasWidth: number,
                    canvasHeight: number, ) {
    const canvas: any = document.getElementById(canvasName);
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');
    const img: any = document.getElementById(imageName);

    img.onload = function drawImage() {

        // get a block size (see demo for this approach)
        const w = canvas.width * pixelSize;
        const h = canvas.height * pixelSize;
        // draw the original image at a fraction of the final size
        ctx.drawImage(img, 0, 0, w, h);

        // turn off image aliasing
        ctx.msImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;

        // enlarge the minimized image to full size
        ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
    };
  }

Et pour le HTML:

<div *ngIf="imageList && imageList.length >0">
  <img id='imageAny' src={{imageList[incCounter].image}} class="imagePixel" alt="Image"/>
  <canvas id="canvasImage"></canvas>
</div>

J'ai également essayé de faire la pixelisation au moyen de librairies comme pixelate.js (https://github.com/43081j/pixelate.js?files=1) ou encore close-pixelate.js (https://github.com/desandro/close-pixelate) mais là encore, je n'arrive pas à le faire lorsque mon tableau d'image est asynchrone.

Est-ce que vous auriez une solution à mon problème (ou bien une manière simple de pixeliser les images dynamiquement) ?

Merci beaucoup,