Canvas不只是用来画画,把图片转换成黑白模式做出来效果更棒!从零开始的Canvas学习(三)

2023-10-31 18:55:13

前两篇文章主要讲解了如何将视频或者图片绘制到画布上,现在假如我们要将视频或者图片处理处理成一些自己想要的效果比较黑白或者让颜色对比更加明显,应该怎么处理呢?今天本文将继续上篇文章,讲解从零开始的Canvas学习（三）。

一、视频或者图片读取

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var video = document.getElementById("video");
var img = document.getElementById("image");

video.addEventListener("loadedmetadata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  ctx.drawImage(video, 0, 0);
});

video.addEventListener("play", function() {
  setInterval(function() {
    ctx.drawImage(video, 0, 0);
  }, 30);
});

img.addEventListener("load", function() {
  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0);
});

1.上面的代码会首先创建一个画布元素并获取其上下文,然后它会创建一个视频元素和一个图像元素。
2.接着它会给视频元素添加一个“loadedmetadata”事件监听器,这个监听器会在视频的元数据加载完成后触发,然后它会将画布的宽度和高度设置为视频的宽度和高度,并使用drawImage()方法将视频绘制到画布上。
3.它还会给视频元素添加一个“play”事件监听器,这个监听器会在视频播放时触发,然后它会每隔30毫秒使用drawImage()方法将视频绘制到画布上。
4.最后它会给图像元素添加一个“load”事件监听器,这个监听器会在图像加载完成后触发,然后它会将画布的宽度和高度设置为图像的宽度和高度,并使用drawImage()方法将图像绘制到画布上。

二、视频或图片转换为黑白

1.现在我们要讲最核心的部分把图片或者视频转成黑白的,那么我们要用到三个数组r,g,b;通过他们分别代表了红色,绿色,蓝色的数值,然后我们将这三个数值全部变为一样的值,这样我们就得到了一个灰度值; 灰度值转换成黑白只需要做一些判断就可以啦。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var video = document.getElementById("video");
var img = document.getElementById("image");

video.addEventListener("loadedmetadata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  ctx.drawImage(video, 0, 0);
});

video.addEventListener("play", function() {
  setInterval(function() {
    ctx.drawImage(video, 0, 0);
  }, 30);
});

img.addEventListener("load", function() {
  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0);
});

function toBlackAndWhite() {
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imgData.data;

  for (var i = 0; i < data.length; i += 4) {
    var r = data[i];
    var g = data[i + 1];
    var b = data[i + 2];

    var avg = (r + g + b) / 3;

    data[i] = avg;
    data[i + 1] = avg;
    data[i + 2] = avg;
  }

  ctx.putImageData(imgData, 0, 0);
}