이 글에서는 Canvas를 사용하여 픽셀을 조작하는 방법에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.
최신 브라우저는 <video> 요소를 통해 비디오 재생을 지원합니다. 대부분의 브라우저는 MediaDevices.getUserMedia() API를 통해 카메라에 액세스할 수도 있습니다. 하지만 이 두 가지가 결합되더라도 우리는 이 픽셀에 직접 접근하거나 조작할 수 없습니다. <video>元素播放视频。大多数浏览器也可以通过 MediaDevices.getUserMedia()API访问摄像头。但即使这两件事结合起来，我们也无法直接访问和操纵这些像素。
幸运的是，浏览器有一个Canvas API，允许我们使用JavaScript绘制图形。实际上，我们可以从视频本身将图像绘制到 <canvas>
<캔버스>에 이미지를 그릴 수 있으며 이를 통해 해당 픽셀을 조작하고 표시할 수 있습니다. 여기에서 픽셀을 조작하는 방법에 대해 배우는 내용은 캔버스뿐만 아니라 모든 종류 또는 소스의 이미지와 비디오 작업을 위한 기초를 제공합니다. 캔버스에 이미지 추가
영상을 시작하기 전에 캔버스에 이미지를 추가하는 방법을 살펴보겠습니다.<img src> <p> <canvas id="Canvas" class="video"></canvas> </p>
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);이미지 데이터 업데이트
캔버스의 이미지 데이터를 사용하여 픽셀을 조작하고 변경할 수 있습니다. data 속성은 너비, 높이 및 데이터의 세 가지 속성을 갖는 ImageData 객체입니다. 이 속성은 모두 원본 이미지를 기반으로 하며 Uint8ClampedArray로 표시되는 1차원 배열입니다. 데이터 속성이 읽기 전용이지만 해당 값을 변경할 수 없다는 의미는 아닙니다. 이는 이 속성에 다른 배열이 할당된다는 의미입니다.// 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
RGBA 색상
색상은 빨간색, 녹색 및 파란색의 조합인 RGBA 형식으로 표현할 수 있습니다. 알파 A는 색상 불투명도 값을 나타냅니다. 색상(픽셀) 채널 값가장 빠른 작업 중 하나는 모든 RGBA 값을 255로 변경하여 모든 픽셀을 흰색으로 설정하는 것입니다.
// RED GREEN BLUE WHITE [ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255]
데이터는 참조로 전달됩니다. 즉, 데이터를 수정하면 전달된 매개변수의 값이 변경됩니다.
색상 반전많은 계산이 필요하지 않은 훌륭한 효과는 다음과 같습니다. 이미지의 색상을 반전시킵니다.
색상 값은 XOR 연산자(^) 또는 이 공식 255 - 값(값은 0-255 사이여야 함)을 사용하여 반전될 수 있습니다.
// 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이 아닌 4씩 증가시켜 배열의 요소 4개를 픽셀에서 픽셀로, 각 픽셀을 채울 수 있습니다.
알파 값은 색상 반전에 영향을 주지 않으므로 건너뜁니다.
밝기 및 대비다음 공식을 사용하여 이미지의 밝기를 조정하세요: newValue = currentValue + 255 * (밝기 / 100).
밝기는 -100에서 100 사이여야 합니다.
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
}
}
function onClick() {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
invertColors(imageData.data);
// Update the canvas with the new data
context.putImageData(imageData, 0, 0);
}다음 함수를 JavaScript로 작성해 보겠습니다.
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
结论
这个主题可以更深入或解释更多的影响。为你做的功课是找到可以应用于这些骨架示例的不同算法。
了解像素在画布上的结构将允许您创建无限数量的效果，如棕褐色，混色，绿色屏幕效果，图像闪烁/毛刺等。
您甚至可以在不使用图像或视频的情况下即时创建效果
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!
관련 권장 사항:
위 내용은 캔버스를 사용하여 픽셀을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
