Canvas图像处理和滤镜效果编程教程

翻滚的胖子
2023-06-14 16:02:25
前端技术
JavaScript 图片处理 PHP

本教程将教你如何使用Canvas进行图像处理和滤镜效果编程。如果你对JavaScript和HTML有一定的了解，那么你将很快学会这些技巧。

Canvas基础知识

Canvas是HTML5的一项新技术，它允许开发者在浏览器中绘制图形。在使用Canvas前，需要在HTML文档中加入一个Canvas元素：

<canvas id="myCanvas"></canvas>

Canvas元素有两个属性：width和height，分别代表Canvas的宽度和高度。你可以通过JavaScript来获取Canvas元素，然后设置它的宽度和高度：

var canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.height = 500;

当你设置了Canvas元素的宽度和高度后，你就可以在Canvas上绘制图形了。

Canvas图像处理函数

下面是Canvas中常用的一些图像处理函数：

drawImage(): 绘制图像，例如绘制图片。
getImageData(): 获取图像数据，例如获取图片像素值。
putImageData(): 将图像数据放回Canvas中。

接下来我们将详细介绍这些函数的使用方法。

drawImage()

drawImage()函数可以将图片绘制在Canvas上。它有三种用法：

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

其中image是要绘制的图片，dx和dy分别是目标Canvas上图片的左上角坐标，dWidth和dHeight是目标Canvas上图片的宽度和高度，sx和sy是图片上的左上角坐标，sWidth和sHeight是要绘制的图片的宽度和高度。

下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的图片。

getImageData()

getImageData()函数可以获取Canvas中指定区域的像素数据：

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;

其中x和y是要获取像素数据的起始坐标，width和height是要获取像素数据的宽度和高度。getImageData()函数返回一个ImageData对象，这个对象有一个data属性，它是一个Uint8ClampedArray类型的数组，包含了指定区域的所有像素数据。

putImageData()

putImageData()函数可以将ImageData对象中的像素数据放回Canvas中：

context.putImageData(imageData, x, y);

其中imageData是一个ImageData对象，x和y分别是要放置像素数据的左上角坐标。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i] = 255 - imageData.data[i];
  imageData.data[i + 1] = 255 - imageData.data[i + 1];
  imageData.data[i + 2] = 255 - imageData.data[i + 2];
}
ctx.putImageData(imageData, 0, 0);

这个例子将会将Canvas中的所有像素取反。

Canvas滤镜效果函数

下面是Canvas中常用的一些滤镜效果函数：

grayscale(): 图片变灰。
sepia(): 图片变旧。
invert(): 图片取反。
brightness(value): 调整图片亮度。
contrast(value): 调整图片对比度。
saturate(value): 调整图片饱和度。
hue(value): 调整图片色调。

接下来我们将详细介绍这些函数的使用方法。

grayscale()

grayscale()函数可以将图片变灰：

context.filter = 'grayscale(100%)';

其中value的范围是0%到100%，表示图片的灰度值。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'grayscale(100%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的灰色图片。

sepia()

sepia()函数可以将图片变旧：

context.filter = 'sepia(100%)';

其中value的范围是0%到100%，表示图片被旧化的程度。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'sepia(100%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的旧化图片。

invert()

invert()函数可以将图片取反：

context.filter = 'invert(100%)';

其中value的范围是0%到100%，表示图片取反的程度。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'invert(100%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的反相图片。

brightness()

brightness()函数可以调整图片的亮度：

context.filter = 'brightness(150%)';

其中value的范围是0%到400%，表示图片的亮度调整值。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'brightness(150%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的亮度增强的图片。

contrast()

contrast()函数可以调整图片的对比度：

context.filter = 'contrast(200%)';

其中value的范围是0%到400%，表示图片的对比度调整值。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'contrast(200%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的对比度增强的图片。

saturate()

saturate()函数可以调整图片的饱和度：

context.filter = 'saturate(200%)';

其中value的范围是0%到400%，表示图片的饱和度调整值。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'saturate(200%)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的饱和度增强的图片。

hue()

hue()函数可以调整图片的色调：

context.filter = 'hue-rotate(90deg)';

其中value的范围是0deg到360deg，表示图片的色调调整值。下面是一个例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  ctx.filter = 'hue-rotate(90deg)';
  ctx.drawImage(image, 0, 0);
}

这个例子将会在Canvas上绘制一张名为image.jpg的色调旋转90度的图片。