1 在canvas中使用drawImage()方法绘制图像
drawImage(img,x,y)
drawImage(img,x,y,width,height)
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
参数 | 描述 |
---|
img | 规定要使用的图像、画布或视频。 |
sx | 可选。开始剪切的 x 坐标位置。 |
sy | 可选。开始剪切的 y 坐标位置。 |
swidth | 可选。被剪切图像的宽度。 |
sheight | 可选。被剪切图像的高度。 |
x | 在画布上放置图像的 x 坐标位置。 |
y | 在画布上放置图像的 y 坐标位置。 |
width | 可选。要使用的图像的宽度。(伸展或缩小图像) |
height | 可选。要使用的图像的高度。(伸展或缩小图像) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var myImage = new Image();
myImage.src= "picture2.jpg";
//在图片加载完毕时,再drawImage,否则在绘制时,图片可能会未完全加载,导致不显示
myImage.onload = function () {
ctx.drawImage(myImage, 0, 0);
};
</script>
</body>
</html>
2 使用 ImageData 操作图像
- getImageData() 返回一个ImageData对象,从canvas画布上取得所选区域的像素数据
ImageData ctx.getImageData(sx, sy, sw, sh);
参数 | 描述 |
---|
sx | 将要被提取的图像数据矩形区域的左上角 x 坐标。 |
sy | 将要被提取的图像数据矩形区域的左上角 y 坐标。 |
sw | 将要被提取的图像数据矩形区域的宽度。 |
sh | 将要被提取的图像数据矩形区域的高度。 |
- putImageData() 方法将图像数据(从指定的ImageData对象)放回画布上。
void ctx.putImageData(imagedata, dx, dy);
void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
参数 | 描述 |
---|
imageData | 规定要放回画布的 ImageData 对象。 |
dx | ImageData 对象左上角的 x 坐标,以像素计。 |
dy | ImageData 对象左上角的 y 坐标,以像素计。 |
dirtyX | 可选。水平值(x),以像素计,在画布上放置图像的位置。 |
dirtyY | 可选。水平值(y),以像素计,在画布上放置图像的位置。 |
dirtyWidth | 可选。在画布上绘制图像所使用的宽度。 |
dirtyHeight | 可选。在画布上绘制图像所使用的高度。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas_a" ></canvas>
<canvas id="canvas_b" ></canvas>
<input type="button" id="btn" value="灰色滤镜">
<script>
var acanvas = document.querySelector("#canvas_a");
var bcanvas = document.querySelector("#canvas_b");
var oBtn = document.querySelector("#btn");
var actx = acanvas.getContext("2d");
var bctx = bcanvas.getContext("2d");
var myImage = new Image();
myImage.src= "picture2.jpg";
//在图片加载完毕时,再drawImage,否则在绘制时,图片未完全加载
// 图片可能会不显示
myImage.onload = function () {
actx.drawImage(myImage, 0, 0, acanvas.width, acanvas.height);
};
// 点击按钮, 会产生一幅灰度图
oBtn.onclick = function () {
var imageData = actx.getImageData(0, 0, acanvas.width, acanvas.height);
var pixelData = imageData.data;
// 读取到的每个像素会产生4个数据
// 分别是 r g b a 红色 绿色 蓝色 Alpha透明度(取值0-1)
for(var i = 0; i < pixelData.length; i += 4){
var r = pixelData[i + 0];
var g = pixelData[i + 1];
var b = pixelData[i + 2];
var a = pixelData[i + 3];
var grey = r * 0.3 + g * 0.59 + b * 0.11; // 灰度图 公式
pixelData[i + 0] = grey;
pixelData[i + 1] = grey;
pixelData[i + 2] = grey;
}
bctx.putImageData(imageData, 0, 0);
}
</script>
</body>
</html>