Die magische Verwendung von Leinwand

Canvas verfügt über eine magische Methode namens getImageData. Es kann den Farbwert jedes Pixels des Bildes auf der Leinwand ermitteln und ändern.

Wenn Sie verschiedene Filteralgorithmen haben. Dann können Sie Canvas verwenden, um die Filterkonvertierung von Bildern zu realisieren, und Sie können eine Funktion erstellen, die Meitu Xiuxiu ähnelt.

Anleitung:

1: Importieren Sie zunächst das Bild in die Leinwand.

2: var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //Verwenden Sie dies, um die Informationen jedes Pixels des Bildes abzurufen und ein Array zu erhalten. Beachten Sie, dass die erhaltenen Informationen kein zweidimensionales Array wie [[r,g,b,a],[r,g,b,a]] sind, sondern [r,g,b,a,r,g,b, a] Solch ein einzelnes Array, angeordnet in RGBA-Reihenfolge.

3: In diesem Schritt wird mit der Änderung des RGBA jedes Pixels begonnen. Hier finden Sie eine kurze Einführung in den Algorithmus und die Implementierungsschritte des Graustufeneffekts.

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); // Denken Sie nach der Verarbeitung des Pixelfarbwerts daran, die Leinwand mit diesem Satz neu zu zeichnen

Diese Codes sind Der Code das Bilder in Schwarz-Weiß-Effekte umwandelt. Der konkrete Effekt, der erzielt werden kann, hängt davon ab, wie viele Filteralgorithmen Sie haben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die PHP-Chinese-Website zu unterstützen.

Weitere Artikel zur magischen Verwendung von Canvas finden Sie auf der chinesischen PHP-Website!