So manipulieren Sie Pixel mit Canvas

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von Canvas zum Bedienen von Pixeln vorgestellt. Der Inhalt ist recht gut und wird als Referenz dienen.

Moderne Browser unterstützen die Videowiedergabe über das <video>-Element. Die meisten Browser können auch über die API MediaDevices.getUserMedia() auf die Kamera zugreifen. Aber selbst wenn diese beiden Dinge kombiniert werden, können wir nicht direkt auf diese Pixel zugreifen und sie manipulieren.

Glücklicherweise verfügen Browser über eine Canvas-API, die es uns ermöglicht, Grafiken mit JavaScript zu zeichnen. Wir können tatsächlich ein Bild aus dem Video selbst zeichnen, wodurch wir diese Pixel bearbeiten und anzeigen können. <canvas>

Was Sie hier über die Manipulation von Pixeln lernen, bietet Ihnen die Grundlage für die Arbeit mit Bildern und Videos jeglicher Art und Quelle, nicht nur mit Leinwand.

Ein Bild zur Leinwand hinzufügen

Bevor wir mit der Wiedergabe des Videos beginnen, sehen wir uns an, wie man ein Bild zur Leinwand hinzufügt.

<img src>
<p>
  <canvas id="Canvas" class="video"></canvas>
</p>

Wir erstellen ein Bildelement, um das Bild darzustellen, das auf der Leinwand gezeichnet werden soll. Alternativ können wir das Image-Objekt in JavaScript verwenden.

var canvas;
var context;

function init() {
  var image = document.getElementById('SourceImage');
  canvas = document.getElementById('Canvas');
  context = canvas.getContext('2d');

  drawImage(image);
  // Or
  // var image = new Image();
  // image.onload = function () {
  //    drawImage(image);
  // }
  // image.src = 'image.jpg';
}

function drawImage(image) {
  // Set the canvas the same width and height of the image
  canvas.width = image.width;
  canvas.height = image.height;

  context.drawImage(image, 0, 0);
}

window.addEventListener('load', init);

Der obige Code zeichnet das gesamte Bild auf die Leinwand.

Malbild auf Leinwand über Welling Guzman (@wellingguzman) auf CodePen anzeigen

Jetzt können wir mit diesen Pixeln spielen

Bilddaten aktualisieren

Bilddaten auf der Leinwand ermöglichen es uns, Pixel zu manipulieren und zu ändern. Die

Dateneigenschaft ist ein ImageData-Objekt, das drei Eigenschaften hat – Breite, Höhe und Daten/. Alle diese repräsentieren etwas Alle diese Eigenschaften sind schreibgeschützt. Dabei handelt es sich um ein eindimensionales Array, das durch ein Uint8ClampedArray-Objekt dargestellt wird und die Daten für jedes Pixel im RGBA-Format enthält -nur bedeutet das nicht, dass wir seinen Wert nicht ändern können.

Sie fragen sich vielleicht, welchen Wert das Uint8ClampedArray-Objekt darstellt:

Das Array vom Typ Uint8ClampedArray stellt ein Array von 8-Bit-Ganzzahlen ohne Vorzeichen dar, das auf 0-255 begrenzt ist, wenn Sie einen Wert außerhalb des Bereichs [0,255] angeben, 0 oder 255, wenn Sie a angeben Wenn es sich nicht um eine Ganzzahl handelt, wird die nächste Ganzzahl festgelegt. Sobald Sie die Methoden des Objekts festgelegt haben, können Sie die Standard-Array-Indizierungssyntax verwenden (d. h. die Klammernotation verwenden).

Kurz gesagt, dieses Array speichert an jeder Position einen Wert zwischen 0 und 255, was es zu einer perfekten Lösung für das RGBA-Formatschema macht, da jeder Teil durch 0 bis 255 Werte dargestellt wird

RGBA-Farbe

Farbe kann im RGBA-Format dargestellt werden, also Rot, Grün und Blau. Die Kombination von A stellt den Alphawert der Farbopazität dar. Jede Position im Array

stellt eine Farbe (Pixel) dar. Kanalwert. Die erste Position ist. Der rote Wert

Die zweite Position ist der grüne Wert

Die dritte Position ist der blaue Wert

• Die vierte Position ist der Alpha-Wert

• Die 5. Position ist der nächste Pixel-Rotwert

• Die 6. Position ist unten Der Grünwert eines Pixels

• Die 7. Position ist der Blauwert des nächsten Pixels

• Die 8. Position ist der Alphawert des nächsten Pixels

• und so weiter...

• Wenn Sie ein 2x2-Bild haben, dann haben wir ein 16 Bit-Array (2x2 Pixel x 4 jeder Wert).

Geänderte Pixeldaten

• Eines der schnellsten Dinge, die wir tun können, ist, alle Pixel auf Weiß zu setzen, indem wir alle RGBA-Werte auf 255 ändern.

• // Get the canvas image data
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  
  image.data = new Uint8ClampedArray(); // WRONG
  image.data[1] = 0; // CORRECT

Die Daten werden als Referenz übergeben, was bedeutet, dass jede Änderung, die wir daran vornehmen, den Wert des übergebenen Parameters ändert.

Farben umkehren

Ein toller Effekt, der nicht allzu viel Berechnung erfordert, ist das Umkehren der Farben eines Bildes.

Farbwerte können mit dem XOR-Operator (^) oder dieser Formel 255 – Wert (Wert muss zwischen 0 und 255 liegen) invertiert werden.

// RED                 GREEN                BLUE                 WHITE
[ 255, 0, 0, 255,      0, 255, 0, 255,      0, 0, 255, 255,      255, 255, 255, 255]

Wir erhöhen die Schleife um 4 statt um 1 wie zuvor, sodass wir von Pixel zu Pixel gehen und 4 Elemente im Array pro Pixel füllen können.

Der Alpha-Wert hat keinen Einfluss auf die Invertierung der Farbe, daher überspringen wir ihn.

Helligkeit und Kontrast

Verwenden Sie die folgende Formel, um die Helligkeit eines Bildes anzupassen: neuer Wert = aktueller Wert + 255 * (Helligkeit / 100).

Helligkeit muss zwischen -100 und 100 liegen

currentValue ist der aktuelle Beleuchtungswert für Rot, Grün oder Blau.

newValue ist das Ergebnis der Hinzufügung von Helligkeit zum aktuellen Farblicht

Das Anpassen des Kontrasts des Bildes kann mit dieser Formel erfolgen:

// Use a button to trigger the "effect"
var button = document.getElementById('Button');

button.addEventListener('click', onClick);

function changeToWhite(data) {
  for (var i = 0; i < data.length; i++) {
    data[i] = 255;
  }
}

function onClick() {
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  changeToWhite(imageData.data);

  // Update the canvas with the new data
  context.putImageData(imageData, 0, 0);
}

1. Die Hauptberechnung besteht darin, den Kontrastfaktor zu ermitteln, der auf jeden Farbwert angewendet wird. Truncation ist eine Funktion, die sicherstellt, dass der Wert zwischen 0 und 255 bleibt.
   Lassen Sie uns diese Funktionen in JavaScript schreiben:

function applyBrightness(data, brightness) {
  for (var i = 0; i < data.length; i+= 4) {
    data[i] += 255 * (brightness / 100);
    data[i+1] += 255 * (brightness / 100);
    data[i+2] += 255 * (brightness / 100);
  }
}

function truncateColor(value) {
  if (value < 0) {
    value = 0;
  } else if (value > 255) {
    value = 255;
  }

  return value;
}

function applyContrast(data, contrast) {
  var factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));

  for (var i = 0; i < data.length; i+= 4) {
    data[i] = truncateColor(factor * (data[i] - 128.0) + 128.0);
    data[i+1] = truncateColor(factor * (data[i+1] - 128.0) + 128.0);
    data[i+2] = truncateColor(factor * (data[i+2] - 128.0) + 128.0);
  }
}

在这种情况下，您不需要truncateColor函数，因为Uint8ClampedArray会截断这些值，但为了翻译我们在其中添加的算法。

需要记住的一点是，如果应用亮度或对比度，则图像数据被覆盖后无法回到之前的状态。如果我们想要重置为原始状态，则原始图像数据必须单独存储以供参考。保持图像变量对其他函数可访问将会很有帮助，因为您可以使用该图像来重绘画布和原始图像。

var image = document.getElementById('SourceImage');

function redrawImage() {
  context.drawImage(image, 0, 0);
}

使用视频

为了使它适用于视频，我们将采用我们的初始图像脚本和HTML代码并做一些小的修改。

HTML

通过替换以下行来更改视频元素的Image元素：

 <img src>

...with this:

<video src></video>

JavaScript

替换这一行：

var image = document.getElementById('SourceImage');

...添加这行：

var video = document.getElementById('SourceVideo');

要开始处理视频，我们必须等到视频可以播放。

video.addEventListener('canplay', function () {
    // Set the canvas the same width and height of the video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;    

    // Play the video
    video.play();

    // start drawing the frames  
    drawFrame(video);
});

当有足够的数据可以播放媒体时，至少在几帧内播放事件播放。

我们无法看到画布上显示的任何视频，因为我们只显示第一帧。我们必须每n毫秒执行一次drawFrame以跟上视频帧速率。

在drawFrame内部，我们每10ms再次调用drawFrame。

function drawFrame(video) {
  context.drawImage(video, 0, 0);

  setTimeout(function () {
    drawFrame(video);
  }, 10);
}

在执行drawFrame之后，我们创建一个循环，每10ms执行一次drawFrame - 足够的时间让视频在画布中保持同步。

将效果添加到视频

我们可以使用我们之前创建的相同函数来反转颜色：

function invertColors(data) {
  for (var i = 0; i < data.length; i+= 4) {
    data[i] = data[i] ^ 255; // Invert Red
    data[i+1] = data[i+1] ^ 255; // Invert Green
    data[i+2] = data[i+2] ^ 255; // Invert Blue
  }
}

并将其添加到drawFrame函数中：

function drawFrame(video) {
  context.drawImage(video, 0, 0);

  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  invertColors(imageData.data);
  context.putImageData(imageData, 0, 0);

  setTimeout(function () {
    drawFrame(video);
  }, 10);
}

我们可以添加一个按钮并切换效果：

function drawFrame(video) {
  context.drawImage(video, 0, 0);

  if (applyEffect) {
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    invertColors(imageData.data);
    context.putImageData(imageData, 0, 0);
  }

  setTimeout(function () {
    drawFrame(video);
  }, 10);
}

使用 camera

我们将保留我们用于视频的相同代码，唯一不同的是我们将使用MediaDevices.getUserMedia将视频流从文件更改为相机流。

MediaDevices.getUserMedia是弃用先前API MediaDevices.getUserMedia（）的新API。浏览器仍旧支持旧版本，并且某些浏览器不支持新版本，我们必须求助于polyfill以确保浏览器支持其中一种。

首先，从视频元素中删除src属性：

<video><code>

<code>// Set the source of the video to the camera stream
function initCamera(stream) {
    video.src = window.URL.createObjectURL(stream);
}

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(initCamera)
    .catch(console.error)
  );
}

Live Demo

效果

到目前为止，我们所介绍的所有内容都是我们需要的基础，以便为视频或图像创建不同的效果。我们可以通过独立转换每种颜色来使用很多不同的效果。

灰阶

将颜色转换为灰度可以使用不同的公式/技巧以不同的方式完成，以避免陷入太深的问题我将向您展示基于GIMP desaturate tool去饱和工具和Luma的五个公式：

Gray = 0.21R + 0.72G + 0.07B // Luminosity
Gray = (R + G + B) ÷ 3 // Average Brightness
Gray = 0.299R + 0.587G + 0.114B // rec601 standard
Gray = 0.2126R + 0.7152G + 0.0722B // ITU-R BT.709 standard
Gray = 0.2627R + 0.6780G + 0.0593B // ITU-R BT.2100 standard

我们想要使用这些公式找到的是每个像素颜色的亮度等级。该值的范围从0（黑色）到255（白色）。这些值将创建灰度（黑白）效果。

这意味着最亮的颜色将最接近255，最暗的颜色最接近0。

Live Demo

双色调

双色调效果和灰度效果的区别在于使用了两种颜色。在灰度上，您有一个从黑色到白色的渐变色，而在双色调中，您可以从任何颜色到任何其他颜色（从蓝色到粉红色）都有一个渐变。

使用灰度的强度值，我们可以将其替换为梯度值。

我们需要创建一个从ColorA到ColorB的渐变。

function createGradient(colorA, colorB) {   
  // Values of the gradient from colorA to colorB
  var gradient = [];
  // the maximum color value is 255
  var maxValue = 255;
  // Convert the hex color values to RGB object
  var from = getRGBColor(colorA);
  var to = getRGBColor(colorB);

  // Creates 256 colors from Color A to Color B
  for (var i = 0; i <= maxValue; i++) {
    // IntensityB will go from 0 to 255
    // IntensityA will go from 255 to 0
    // IntensityA will decrease intensity while instensityB will increase
    // What this means is that ColorA will start solid and slowly transform into ColorB
    // If you look at it in other way the transparency of color A will increase and the transparency of color B will decrease
    var intensityB = i;
    var intensityA = maxValue - intensityB;

    // The formula below combines the two color based on their intensity
    // (IntensityA * ColorA + IntensityB * ColorB) / maxValue
    gradient[i] = {
      r: (intensityA*from.r + intensityB*to.r) / maxValue,
      g: (intensityA*from.g + intensityB*to.g) / maxValue,
      b: (intensityA*from.b + intensityB*to.b) / maxValue
    };
  }

  return gradient;
}

// Helper function to convert 6digit hex values to a RGB color object
function getRGBColor(hex)
{
  var colorValue;

  if (hex[0] === &#39;#&#39;) {
    hex = hex.substr(1);
  }

  colorValue = parseInt(hex, 16);

  return {
    r: colorValue >> 16,
    g: (colorValue >> 8) & 255,
    b: colorValue & 255
  }
}

简而言之，我们从颜色A创建一组颜色值，降低强度，同时转到颜色B并增加强度。

从 #0096ff 到 #ff00f0

var gradients = [
  {r: 32, g: 144, b: 254},
  {r: 41, g: 125, b: 253},
  {r: 65, g: 112, b: 251},
  {r: 91, g: 96, b: 250},
  {r: 118, g: 81, b: 248},
  {r: 145, g: 65, b: 246},
  {r: 172, g: 49, b: 245},
  {r: 197, g: 34, b: 244},
  {r: 220, g: 21, b: 242},
  {r: 241, g: 22, b: 242},
];

缩放颜色过渡的表示

上面有一个从＃0096ff到＃ff00f0的10个颜色值的渐变示例。

颜色过渡的灰度表示

现在我们已经有了图像的灰度表示，我们可以使用它将其映射到双色调渐变值。

The duotone gradient has 256 colors while the grayscale has also 256 colors ranging from black (0) to white (255). That means a grayscale color value will map to a gradient element index.

var gradientColors = createGradient('#0096ff', '#ff00f0');
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
applyGradient(imageData.data);

for (var i = 0; i < data.length; i += 4) {
  // Get the each channel color value
  var redValue = data[i];
  var greenValue = data[i+1];
  var blueValue = data[i+2];

  // Mapping the color values to the gradient index
  // Replacing the grayscale color value with a color for the duotone gradient
  data[i] = gradientColors[redValue].r;
  data[i+1] = gradientColors[greenValue].g;
  data[i+2] = gradientColors[blueValue].b;
  data[i+3] = 255;
}

Live Demo

结论

这个主题可以更深入或解释更多的影响。为你做的功课是找到可以应用于这些骨架示例的不同算法。

了解像素在画布上的结构将允许您创建无限数量的效果，如棕褐色，混色，绿色屏幕效果，图像闪烁/毛刺等。

您甚至可以在不使用图像或视频的情况下即时创建效果

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Eigenschaften von Leinwandlinien


So verwenden Sie Leinwand zum Implementieren von Bildmosaiken


Das obige ist der detaillierte Inhalt vonSo manipulieren Sie Pixel mit Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!