L'usage magique de la toile

Canvas a une méthode magique appelée getImageData. Il peut obtenir la valeur de couleur de chaque pixel de l'image dans le canevas et elle peut être modifiée.

Si vous disposez de différents algorithmes de filtrage. Ensuite, vous pouvez utiliser Canvas pour réaliser la conversion de filtre des images et vous pouvez créer une fonction similaire à Meitu Xiuxiu.

Instructions :

1 : Importez d'abord l'image dans le canevas.

2 : var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //Utilisez ceci pour obtenir les informations de chaque pixel de l'image et obtenir un tableau. Notez que les informations obtenues ne sont pas un tableau bidimensionnel comme [[r,g,b,a],[r,g,b,a]] mais [r,g,b,a,r,g,b, a] Un tel tableau unique disposé dans l'ordre rgba.

3 : Cette étape consiste à commencer à changer le rgba de chaque pixel. Voici une brève introduction à l'algorithme et aux étapes de mise en œuvre de l'effet niveaux de gris.

function gray(canvasData)
{
for ( var x = 0; x < canvasData.width; x++) {
  for ( var y = 0; y < canvasData.height; y++) {
  // Index of the pixel in the array
  var idx = (x + y * canvasData.width) * 4;
  var r = canvasData.data[idx + 0];
  var g = canvasData.data[idx + 1];
  var b = canvasData.data[idx + 2];
  var gray = .299 * r + .587 * g + .114 * b;
  // assign gray scale value
  canvasData.data[idx + 0] = gray; // Red channel
  canvasData.data[idx + 1] = gray; // Green channel
  canvasData.data[idx + 2] = gray; // Blue channel
  canvasData.data[idx + 3] = 255; // Alpha channel
  // add black border
  if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8)) 
  {
   canvasData.data[idx + 0] = 0;
   canvasData.data[idx + 1] = 0;
   canvasData.data[idx + 2] = 0;
  }
  }
}
return canvasData;
}

4 : context.putImageData(canvasData, 0, 0); //Après avoir traité la valeur de couleur du pixel, pensez à redessiner le canevas avec cette phrase

Ces codes sont Le code qui convertit les images en effets noir et blanc. L'effet spécifique pouvant être obtenu dépend du nombre d'algorithmes de filtrage dont vous disposez.

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou au travail de chacun. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles liés à l'utilisation magique de Canvas, veuillez faire attention au site Web PHP chinois !