html5-canvas
Pixelmanipulation mit "getImageData" und "putImageData"

Einführung in "context.getImageData"

Mit Html5 Canvas können Sie die Farbe von Pixeln auf der Leinwand abrufen und ändern.

Sie können die Pixelmanipulation von Canvas verwenden, um:

• Erstellen Sie einen Farbwähler für ein Bild oder wählen Sie eine Farbe in einem Farbrad aus.
• Erstellen Sie komplexe Bildfilter wie Unschärfe und Kantenerkennung.
• Färben Sie einen beliebigen Teil eines Bildes auf Pixelebene neu ein (wenn Sie HSL verwenden, können Sie sogar ein Bild unter Beibehaltung der wichtigen Beleuchtung und Sättigung neu einfärben, sodass das Ergebnis nicht so aussieht, als hätte jemand Farbe auf das Bild geschlagen. Hinweis: Canvas bietet jetzt Blend Compositing, mit dem ein Bild in einigen Fällen auch neu eingefärbt werden kann.
• "Knockout" den Hintergrund um eine Person / einen Gegenstand in einem Bild,
• Erstellen Sie ein Paint-Bucket-Tool, um einen Teil eines Bildes zu erkennen und zu überfluten (ändern Sie z. B. die Farbe eines auf einen Benutzer geklickten Blütenblatts von grün auf gelb).
• Untersuchen Sie ein Bild auf Inhalte (z. B. Gesichtserkennung).

Häufige Probleme:

• Aus Sicherheitsgründen ist getImageData deaktiviert, wenn Sie ein Bild gezeichnet haben, das von einer anderen Domäne stammt als die Webseite selbst.
• getImageData ist eine relativ teure Methode, da ein großes Pixeldatenarray erstellt wird und die GPU nicht zur Unterstützung der getImageData wird. Hinweis: Canvas verfügt jetzt über ein Mischungs-Compositing, das einige getImageData wie getImageData .
• Bei .png-Bildern getImageData möglicherweise nicht genau die gleichen Farben wie in der ursprünglichen .png-Datei, da der Browser beim Zeichnen von Bildern auf der Leinwand Gamma-Korrekturen und Alpha-Premultiplication durchführen darf.

Pixelfarben erhalten

Verwenden Sie getImageData , um die Pixelfarben für den gesamten Inhalt der Leinwand oder einen Teil davon zu erhalten.

Die getImageData Methode gibt ein imageData Objekt zurück

Das imageData Objekt verfügt über eine .data Eigenschaft, die die Pixelfarbinformationen enthält.

Die data Uint8ClampedArray ist ein Uint8ClampedArray , der die Uint8ClampedArray Rot, Grün, Blau und Alpha (Deckkraft) für alle angeforderten Pixel enthält.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

Sie können die Position eines [x, y] -Pixels innerhalb eines data wie folgt ermitteln:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

Und dann können Sie die roten, grünen, blauen und Alpha-Werte dieses Pixels wie folgt abrufen:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

Eine Abbildung, die zeigt, wie das Pixeldatenfeld strukturiert ist

context.getImageData ist unten für eine kleine Leinwand mit 2x3 Pixel dargestellt: