Comment puis-je enregistrer des images à partir d'un canevas avec des filtres CSS appliqués ?

Enregistrement d'images de Canvas avec des filtres CSS

Vous avez appliqué des filtres CSS à une image, mais lorsque vous essayez de l'enregistrer, le l'image originale est préservée sans aucun effet. Pour résoudre cela, il existe deux approches principales :

1. Utiliser la propriété de filtre de contexte (Firefox uniquement)

Firefox prend en charge la propriété de filtre de contexte, qui vous permet d'appliquer directement des filtres CSS au contexte du canevas :

var ctx = myCanvas.getContext('2d');
ctx.filter = "grayscale(50%) blur(5px)";
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

Cela applique le filtre puis enregistre la toile en tant qu'image.

2. Appliquer les filtres manuellement (tous les navigateurs)

Bien que la propriété de filtre contextuel ne soit pas largement prise en charge, vous pouvez appliquer manuellement des filtres au canevas à l'aide d'opérations au niveau des pixels. Cela nécessite l'utilisation du module d'effets de filtre niveau 1 et des spécifications des filtres SVG et de la matrice de couleurs :

// Calculate filter matrix for grayscale
var greyMatrix = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0, 0, 0, 1, 0
];

// Apply grayscale filter to canvas
var imgData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height);
for (var i = 0; i < imgData.data.length; i += 4) {
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = (r * greyMatrix[0] + g * greyMatrix[1] + b * greyMatrix[2]);
}
ctx.putImageData(imgData, 0, 0);

Vous répéterez ce processus pour chaque filtre que vous souhaitez appliquer.

N'oubliez pas que ces approches sont soit s'appuyer sur une propriété spécifique à Firefox ou nécessiter une manipulation manuelle du filtre. Si une large prise en charge du navigateur est cruciale, envisagez de développer une solution backend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!