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

Enregistrement d'images avec des filtres CSS depuis Canvas

Défi

Pour enregistrer une image après avoir appliqué des filtres CSS côté client, suivez ces étapes :

1. Utilisez des filtres CSS pour améliorer l'image.
2. Convertissez l'image en élément de canevas.
3. Essayez d'enregistrer l'image avec var data = myCanvas.toDataURL( "image/png");.

Cependant, cette méthode aboutit souvent à enregistrer l'image sans les filtres appliqués.

Comprendre le problème

Les filtres CSS sont appliqué à l'élément lui-même, mais les éléments de canevas représentent des bitmaps qui ne sont pas affectés par CSS. Sans la propriété filter du contexte, la seule option est d'appliquer manuellement les filtres aux pixels de l'image.

Solution

Si la propriété filter du contexte est disponible (prise en charge dans la plupart des navigateurs modernes), vous pouvez appliquer le filtre directement :

var ctx = myCanvas.getContext('2d');

var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;

Si la propriété de filtre n'est pas disponible, vous devez implémenter manuellement les effets de filtre au niveau des pixels. Reportez-vous au module d'effets de filtre niveau 1 et aux filtres SVG et matrice de couleurs pour obtenir des conseils.

Exemple de code

Cet exemple montre comment appliquer un filtre à l'aide de la propriété de filtre du contexte :

// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";

function draw() {
  // Get the canvas and its context
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  // Resize the canvas to match the image
  canvas.width = this.width;
  canvas.height = this.height;

  // Apply the filter using the `filter` property
  ctx.filter = "sepia(0.8)";

  // Draw the image onto the canvas
  ctx.drawImage(this, 0, 0);

  // Convert the canvas to a data URL
  var data = canvas.toDataURL("image/png");

  // Set the `src` attribute of an image element to the data URL
  document.querySelector("img").src = data;
}

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!