캔버스를 사용하여 픽셀을 조작하는 방법-CSS 튜토리얼-php.cn

이 글에서는 Canvas를 사용하여 픽셀을 조작하는 방법에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

최신 브라우저는요소를 통해 비디오 재생을 지원합니다. 대부분의 브라우저는 MediaDevices.getUserMedia() API를 통해 카메라에 액세스할 수도 있습니다. 하지만 이 두 가지가 결합되더라도 우리는 이 픽셀에 직접 접근하거나 조작할 수 없습니다.元素播放视频。大多数浏览器也可以通过 MediaDevices.getUserMedia()API访问摄像头。但即使这两件事结合起来，我们也无法直接访问和操纵这些像素。

幸运的是，浏览器有一个Canvas API，允许我们使用JavaScript绘制图形。实际上，我们可以从视频本身将图像绘制到

다행히도 브라우저에는 JavaScript를 사용하여 그래픽을 그릴 수 있는 Canvas API가 있습니다. 실제로 비디오 자체에서 <캔버스>에 이미지를 그릴 수 있으며 이를 통해 해당 픽셀을 조작하고 표시할 수 있습니다.

여기에서 픽셀을 조작하는 방법에 대해 배우는 내용은 캔버스뿐만 아니라 모든 종류 또는 소스의 이미지와 비디오 작업을 위한 기초를 제공합니다.

캔버스에 이미지 추가

영상을 시작하기 전에 캔버스에 이미지를 추가하는 방법을 살펴보겠습니다.

로그인 후 복사

캔버스에 그릴 이미지를 표현하는 이미지 요소를 생성합니다. 또는 JavaScript에서 Image 객체를 사용할 수 있습니다.

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);

로그인 후 복사

위 코드는 전체 이미지를 캔버스에 그립니다.

CodePen에서 Welling Guzman(@wellingguzman)을 통해 캔버스 이미지를 봅니다.

이제 해당 픽셀을 가지고 놀 수 있습니다.

이미지 데이터 업데이트

캔버스의 이미지 데이터를 사용하여 픽셀을 조작하고 변경할 수 있습니다.

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

로그인 후 복사

Uint8ClampedArray 객체는 어떤 값을 나타내는지 궁금하실 겁니다. MDN의 설명은 다음과 같습니다.

Uint8ClampedArray 유형 배열은 0-으로 고정된 8비트 부호 없는 정수 배열을 나타냅니다. 255, [0,255] 범위 밖의 값을 지정하면 0 또는 255가 설정되고, 정수가 아닌 값을 지정하면 가장 가까운 정수가 0으로 설정됩니다. 일단 설정되면 객체를 참조하는 방법을 사용할 수 있습니다. 배열의 요소 또는 표준 배열 인덱싱 구문 사용(예: 대괄호 표기법 사용)

간단히 말하면 이 배열은 각 위치에 0에서 255 사이의 값을 저장하므로 RGBA 형식이 됩니다. 각 부분이 다음과 같이 표현되므로 완벽한 솔루션입니다. 0에서 255 사이의 값입니다.

RGBA 색상

색상은 빨간색, 녹색 및 파란색의 조합인 RGBA 형식으로 표현할 수 있습니다. 알파 A는 색상 불투명도 값을 나타냅니다. 색상(픽셀) 채널 값

첫 번째 위치는 빨간색 값
두 번째 위치는 녹색 값
파란색 값
네 번째 위치는 알파 값
5번째 위치는 다음 픽셀의 빨간색 값
6번째 위치는 다음 픽셀의 녹색 값
7번째 위치는 다음 픽셀의 파란색 값
8번째 위치는 다음 픽셀 알파 값
등...

2x2 이미지가 있으면 16비트 배열(각각 2x2 픽셀 x 4개 값)이 있습니다.

2x2 이미지 축소

배열은 다음과 같습니다.

픽셀 데이터 변경

가장 빠른 작업 중 하나는 모든 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元素：

로그인 후 복사

...with this:

로그인 후 복사

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属性：


        // 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!