canvas像素操作

最新推荐文章于 2023-10-19 16:59:06 发布

漂流の少年

最新推荐文章于 2023-10-19 16:59:06 发布

阅读量193

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： html js css

本文链接：https://blog.csdn.net/YINZHE__/article/details/118407253

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.ImageData对象

ImageData对象表示图像数据，存储canvas对象真实的像素数据

属性

width:返回ImageData对象的宽度，单位：像素

height:返回ImageData对象的高度，单位：像素

data：返回一个对象，包含指定ImageData对象的图像数据

图像数据是一个数组，包含RGBA格式的整型数据，范围值0-255，每个像素用4个值来表示，分别是红、绿、蓝、透明值。对于透明值，0是透明，255是完全可见

数组格式：[r1,g1,b1,a1,r2,g2,b2,a2,...]

2.创建图像数据

使用createImageData()方法可以创建一个新的、空白的ImageData对象。

具体用法

    //以指定的尺寸（单位：像素）创建新的ImageData对象
    var imgData=context.createImageData(width,height);
    //创建一个新对象，和imgData对象尺寸相同(不会复制图像的data)
    var imgData=context.createImageData(imgData);

3.将图像数据写入画布

putImageData()方法可以将图像数据从指定的ImageData对象写入画布

putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

imgData:要写入画布的imgData对象

x:imgData对象左上角的x坐标

y:imgData对象左上角的y坐标

dirtyX:可选参数，在画布上放置图像的x轴位置

dirtyY:可选参数，在画布上放置图像的y轴位置

dirtyWidth:可选参数，在画布上绘制图像的宽度

dirtyHeight:可选参数，在画布上绘制图像的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>像素操作</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
    let ctx=document.getElementById("myCanvas").getContext("2d");
    let imgData=ctx.createImageData(100,100);
    for(let i=0;i<imgData.data.length;i+=4){
        imgData.data[i]=255;
        imgData.data[i+1]=0;
        imgData.data[i+2]=0;
        imgData.data[i+3]=255;
    }
    ctx.putImageData(imgData,10,10);
</script>
</body>
</html>

4.在画布中复制图像数据

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

x:开始复制的左上角的位置的x坐标

y:开始复制的左上角的位置的y坐标

width:将要复制的矩形区域的宽度

height:将要复制的矩形区域的高度

5.保存图片

canvas.toDataURL(type,encodeOptions);

该方法可以将画布保存为图片，返回一个包含图片展示的data URL

data URL：是一种base64位编码的URL

type:可选参数，默认是image/png

encodeOptions:可选参数，默认是0.92。当指定图片格式为image/jpeg或image/webp的时候，可以设置图片的质量，取值从0到1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>下载画布</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<button id="downloadImageBtn" onclick="saveAsLocalImage()">下载图像</button>
<script type="text/javascript">
    window.onload=function (){
        let canvas=document.getElementById("myCanvas");
        let ctx=canvas.getContext("2d");
        ctx.fillStyle="rgb(0,0,255)";
        ctx.fillRect(60,70,50,50);
        ctx.fillStyle="rgb(255,255,0)";
        ctx.fillRect(10,20,50,50);
    }
    function saveAsLocalImage() {
        let canvas=document.getElementById("myCanvas");
        let image=canvas.toDataURL().replace("image/png", "image/octet-stream");
        window.location.href=image;
    }
</script>
</body>
</html>

漂流の少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas像素操作

1.ImageData对象ImageData对象表示图像数据，存储canvas对象真实的像素数据属性width:返回ImageData对象的宽度，单位：像素height:返回ImageData对象的高度，单位：像素data：返回一个对象，包含指定ImageData对象的图像数据图像数据是一个数组，包含RGBA格式的整型数据，范围值0-255，每个像素用4个值来表示，分别是红、绿、蓝、透明值。对于透明值，0是透明，255是完全可见数组格式：[r1,g1,b1,a1,r2,g2,b2
复制链接

扫一扫