canvas学习系列-操作图像

最新推荐文章于 2024-05-11 12:49:30 发布

yongye_

最新推荐文章于 2024-05-11 12:49:30 发布

阅读量595

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/yongye_/article/details/80467589

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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	可选。在画布上绘制图像所使用的高度。

createImageData() 创建新的空白ImageData对象，新对象中所有的颜色都是透明的黑色。

ImageData ctx .createImageData（width，height）; 
ImageData ctx .createImageData（imagedata）;

参数描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。
示例

参数	描述
width	ImageData 对象的宽度，以像素计。
height	ImageData 对象的高度，以像素计。
imageData	另一个 ImageData 对象。

<!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>

yongye_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习系列-操作图像

1 在canvas中使用drawImage()方法绘制图像构造函数如下：drawImage(img,x,y)drawImage(img,x,y,width,height)drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
复制链接

扫一扫

专栏目录