Heim > Artikel > Web-Frontend > 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 39000f942b2545a5315c57fa3276f220
-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. 5ba626b379994d53f7acf72a64f9b697
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-FarbeFarbe 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).
// 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
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); }
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] === '#') { 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!