캔버스를 사용하여 픽셀을 조작하는 방법

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

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

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

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

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

캔버스에 이미지 추가

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

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

캔버스에 그릴 이미지를 표현하는 이미지 요소를 생성합니다. 또는 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 사이여야 합니다.

currentValue는 빨간색, 녹색 또는 파란색에 대한 현재 조명 값입니다.
newValue는 현재 색상의 빛과 밝기의 결과입니다.
이미지의 대비 조정은 다음 공식으로 수행할 수 있습니다.

4. 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);
   }

주요 계산은 다음과 같은 대비를 얻는 것입니다. 각 색상 값 요소에 적용됩니다. 잘림은 값이 0에서 255 사이에 유지되도록 하는 기능입니다.

다음 함수를 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] === &#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

结论

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

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

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

캔버스 선의 속성 정보

캔버스를 사용하여 이미지 모자이크를 얻는 방법

위 내용은 캔버스를 사용하여 픽셀을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!