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);
};
}
Est-ce que vous auriez une solution à mon problème (ou bien une manière simple de pixeliser les images dynamiquement) ?
Merci beaucoup,
[Ionic | Angular] Pixeliser une image dynamique
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.