canvas - 5-像素级操作

最新推荐文章于 2024-02-09 08:49:51 发布
最新推荐文章于 2024-02-09 08:49:51 发布
阅读量227 收藏
点赞数
分类专栏： canvas 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38245947/article/details/120253873
版权

1.理解ImageData() 对象的获取方式。

1.1. ImageData 是什么？

ImageData 是图片的数据化，它具备以下属性：

  1. data：Uint8ClampedArray [r,g,b,a, r,g,b,a, r,g,b,a, r,g,b,a]
  2. width：整数
  3. heidth：整数

注：Uint8ClampedArray 翻译过来是 8位无符号整型固定数组，其取值范围是[0,255]。若小于0，则为0，大于255，则为255。若为小数，则取整，取整的方法是银行家舍入。

1.2 怎么拿到 ImageData() 对象？
  1. 直接建立ImageData() 对象（相当于自己新建了一张图片）。

  • new ImageData()

    new ImageData(width, height)

    new ImageData(Uint8ClampedArray, width, height)

  • ctx.createImageData()

    ctx.createImageData(width, height)

    ctx.createImageData(ImageData)

  1. 获取canvas 的ImageData() 对象（可以以此原理获取真实图片的数据）

    ctx.getImageData(x, y, width, height)

  2. 在canvas 中显示ImageData
    使用： putImageData(ImageData, dx, dy, x, y, w, h)
    在这里插入图片描述

const imgDt=ctx.createImageData(width,height);
    console.log('imgDt', imgDt)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageData </title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');

    /*
    * 图片尺寸：宽，高
    * */
    const [width,height]=[400,200];

    /*ImageData 对象的建立
    *   new ImageData(Uint8ClampedArray, width, height)
    *   new ImageData( width, height)
    * */
    /*const imgDt=new ImageData(width,height);

    imgDt.data.forEach((ele,ind)=>{
        imgDt.data[ind]=255;
    })
    console.log(imgDt);

    ctx.putImageData(imgDt,0,0);*/


    /*用上下文建立ImageData 对象
    *   ctx.createImageData(width, height)
    *   ctx.createImageData(ImageData)
    * */
    const imgDt=ctx.createImageData(width,height);
    imgDt.data.forEach((ele,ind)=>{
        imgDt.data[ind]=255;
    })
    ctx.putImageData(imgDt,0,0);


    /*getImageData(x, y, width, height) 获取canvas 中的像素*/
    const imgDt2=ctx.getImageData(0,0,1,1);
    console.log(imgDt2);

</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>putImageData</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const ctx=canvas.getContext('2d');

    const img=new Image();
    img.src='./images/dog.jpg';
    img.onload=function(){
        //获取图片宽高
        const {width,height}=img;

        /*1.在canvas 中绘制图像*/
        ctx.drawImage(img,0,0);

        /*2.从canvas 中获取图像的ImageData*/
        const imgDt=ctx.getImageData(0,0,width,height);

        /*3.在canvas 中显示ImageData*/
        ctx.putImageData(
            imgDt,
            0,height,
            width/2,height/2,width/2,height/2);


    };

</script>
</body>
</html>

  1. 理解 ImageData 中的像素集合和图像栅格的对应关系
    ImageData 对象的属性：
    data：Uint8ClampedArray [0,1,2,3, 4,5,6,7,8,9,10,11,12,13,14,15]
    width：2
    heidth：2
    在这里插入图片描述

  2. 遍历像素的方法

  • 1.逐像素遍历：每隔4 个数据遍历一次，简单快捷
for(let i=0;i<arr.length;i+=4){
        let r=data[i+0];
        let g=data[i+1];
        let b=data[i+2];
        let a=data[i+3];
        console.log(r,g,b,a)
}
  • 2.行列遍历：基于行列遍历，可获取像素点的位置信息
for(let y=0;y<h;y++){
       for(let x=0;x<w;x++){
            let ind=(y*w+x)*4;
            let r=data[ind];
            let g=data[ind+1];
            let b=data[ind+2];
            let a=data[ind+3];
            console.log(r,g,b,a)
        }
    }
  1. 图像置灰
    要点：灰度算法 const lm =0.299r + 0.587g + 0.114*b ;

在这里插入图片描述
操作像素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像置灰</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const ctx=canvas.getContext('2d');

    const img=new Image();
    img.src='./images/river.jpg';
    img.onload=draw;

    /*灰度算法: 0.299*r+0.587*g+0.114*b */

    function draw(){
        //图像尺寸
        const {width,height}=img;

        /*1.在canvas 中绘制图像*/
        ctx.drawImage(img,0,0);

        /*2.从canvas 中获取图像的ImageData*/
        const imgDt=ctx.getImageData(0,0,width,height);
        const data=imgDt.data;

        /*像素遍历*/
        // 修改像素中的数据
        for(let i=0;i<data.length;i+=4){
            const [r,g,b]=[
                data[i],
                data[i+1],
                data[i+2],
            ]
            const lm=0.299*r+0.587*g+0.114*b;
            data[i]=lm;
            // data[i+1]=lm;
            // data[i+2]=lm;
        }


        /*3.在canvas 中显示ImageData*/
        ctx.putImageData(imgDt,0,height);

    }

</script>
</body>
</html>
  1. 马赛克效果：
    要点：获取一区域的像素颜色，然后将此颜色赋给此区域的所有像素。

原图：
在这里插入图片描述
设置的马赛克效果：
在这里插入图片描述
8. 求r 在像素集合里的索引位置 ind
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>马赛克效果</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const ctx=canvas.getContext('2d');

    //图像源
    const img=new Image();
    img.src='./images/wns.jpg';
    img.onload=render;

    //色块尺寸
    let size=50;

    function render() {
        //图像尺寸
        const {width,height}=img;

        /*1.在canvas 中绘制图像*/
        ctx.drawImage(img,0,0);

        /*2.从canvas 中获取图像的ImageData*/
        const imgDt=ctx.getImageData(0,0,width,height);
        const data=imgDt.data;

        /*行列遍历*/
        for(let y=0;y<height;y+=size){
            for(let x=0;x<width;x+=size){
                const i=(y*width+x)*4;
                const [r,g,b]=[
                    data[i],
                    data[i+1],
                    data[i+2],
                ]
                ctx.fillStyle=`RGB(${r},${g},${b})`;
                ctx.fillRect(x,y,size,size);
            }
        }

    }
</script>
</body>
</html>
yanling.zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas--画布元素
sm_77777的博客
11-08 422
canvas元素是html5中新加入的标签，用来绘制各式各样的图案 &amp;amp;lt;canvas&amp;amp;gt;&amp;amp;lt;/canvas&amp;amp;gt; js代码： //获取指定的canvas元素 var canvas = document.getElementById('canvas'); //调用canvas元素的getContext方法访问获取2d渲染上下文 var context = canvas.getCont...
opencv学习（四）之像素遍历三种方式
热门推荐
烟雨博客
11-07 1万+
在上一篇文章中介绍了图像颜色空间缩减、查找表等内容。在对图像像素进行遍历时共有三种方法： (1). C操作符[] (指针方式访问) (2). 迭代器iterator (3). 动态地址计算 这三种像素遍历方式在速度上有所不同，上一篇文章介绍过用C操作符[]是最快的访问方式。下面会通过对同一幅图像进行处理来直观的比较三种访问方式的速度差异。首先介绍一下opencv中提供的计时函数 1.计时
HTML5 Canvas 教程：十一、图像数据与路径
gunnery的专栏
10-18 1846
十一、图像数据与路径 Image Data and URL   11.1图像数据 Image Data   为了获得画布上矩形区域的每个像素的图像数据，可以使用画布上下文的getImageData()方法获得图像数据对象，然后从data属性访问像素数据。图像数据中的每个像素包含四个分量，即红色、绿色、蓝色和alpha分量。使用图像数据对象访问像素数据有三种常用技术。   1、遍历从左上...
《canvas》之第8章 像素操作
yxqq378287007的博客
06-24 399
canvas 像素操作
Canvas笔记05：像素操作，可以对图像进行像素级别控制和处理
最新发布
贝格前端工场的博客
02-09 1321
Canvas的像素操作是指通过JavaScript代码直接访问和修改HTML5 Canvas元素中的像素数据。Canvas是一个HTML5元素，可以用来在网页上绘制图形、图像和动画等。而像素操作则是指对Canvas元素中的像素进行读取、修改和绘制的操作。在Canvas中，每个像素都有一个对应的坐标位置，可以通过像素的坐标来获取或修改像素的颜色值。通过Canvas的像素操作，可以实现对图像进行像素级别的处理、修改和绘制。
项目--HTML Canvas 和 jQuery遍历
weixin_30398227的博客
05-30 81
function ReShowSelected(){ $("#Map area").each(function(){ //定义画笔属性 var canvers = document.getElementById("diagonal"); var context = canvers.getContext("2d"); context.storkeStyle = "#ccc", con...
html5canvas-vercel
02-12
5. **图像处理**：Canvas API支持对图像的裁剪、缩放、旋转和颜色调整等操作，可以实现一些高级的图像特效。 6. **性能优化**：由于Canvas是实时渲染的，大型图形应用需要注意性能优化，如避免不必要的重绘、使用...
canvas像素点操作之视频绿幕抠图
12-13
总结来说，canvas像素点操作在视频绿幕抠图中扮演了关键角色，通过精细的像素级操作，能够实现在Web环境中实时、动态地去除视频中的绿幕背景，为交互式多媒体应用提供了强大的支持。然而，需要注意的是，对于大规模...
使用Canvas操作像素的方法
09-28
本文主要探讨了如何使用Canvas API 操作像素，这对于图像处理和视频分析等高级应用至关重要。我们将从将图像添加到画布、获取和更新图像数据以及理解RGBA颜色模型三个方面来深入探讨。 首先，要将图像添加到画布，...
canvas-examples:html5 画布示例
06-03
9. **像素操作**: 通过`getImageData()`和`putImageData()`，可以访问和修改画布上的每个像素，实现高级图像处理。 10. **组合模式**: 使用`globalCompositeOperation`可以定义如何将新图形与现有图形进行复合，...
HTML5 Canvas像素处理使用接口介绍
09-28
HTML5 Canvas 提供了强大的像素级操作能力，使得开发者能够对图像进行深入处理。这篇文章主要介绍了如何使用 Canvas API 进行像素处理，包括填充图片、获取与设置像素数据，以及创建和操作 ImageData 对象。 首先，...
给canvas中遍历出来的框，根据重心点/底边中心点连线，并标记两个框之间的距离
小巧r的博客
01-13 474
原理 在画布上遍历数据画框，如果是两个有关系的数组，存一个 A 数组，遍历另一个的同时取之前存好的 A 数组的数据，根据 canvas api 画线。 返回值示例 具体实现 drawAlarmBox(row) { //row是后端返回的值，是一组对象 this.bigCanvas = true; this.$nextTick(() => { var canvas = document.getElementById("alarmBigCanvas");
canvas：利用js遍历绘制七巧板
Manarola的博客
01-04 1882
该浏览器不支持canvas标签； /*canvas基于状态进行绘制图形*/ /* if(canvas.getContext("2d")){ }else{ alert("该浏览器不支持canvas标签") }*/ var tangram = [ //创建一个数组，里面放置7个要绘制的对象，对象的属性包括：绘制点 颜色； {p
遍历图像像素的常用方法
m0_37346206的博客
05-21 2532
本文基本上把常用的遍历方法都讲解了。在图像处理时经常会用到遍历图像像素点的方式，同样是遍历图像像素点，共有很多中方法可以做到；在这些方法中，有相对高效的，也有低效的；不同场景使用不同方法。 数据格式千万不要搞错: uchar对应的是CV_8U，char对应的是CV_8S，int对应的是CV_32S，float对应的是CV_32F，double对应的是CV_64F。 1、遍历图像像素方法一:通过at(i,j)坐标指针 说明：就是把图像看成二维矩阵，at（i,j）索引坐标位置，单通道直接得到坐标位置对应的像素
Canvas的图象绘制：照片上每个像素点的获取
lzc1971676155的博客
08-21 3874
1、createImageData() 自己创建一个新的、空白的ImageDate对象 2、getImageData(x,y,width,height) 从画布上获取指定区域的像素点，作为一个新的ImageData对象（可以将照片放到画布上，然后获取照片的指定区域） （x，y）为左上角起点坐标，width和height为指定区域的大小，可以为一个像素 3、putImageData(object,x...
从0开始canvas系列三 --- 图像像素级操作
qq_41361668的博客
05-01 1125
从0开始canvas系列 从0开始canvas系列一 — canvas画布 从0开始canvas系列二 — 文本和图像 从0开始canvas系列三 — 图像像素级操作 图像像素级操作 imageData对象 大家都知道图片是由许多的像素点构成的，canvas对图像的操作也是基于像素点的，所有的像素点信息都可以存放在imageData实例中 ImageData() 构造函数返回一个新的实例化的 ImageData 对象， 此对象由给定的类型化数组和指定的宽度与高度组成 new ImageData([arr
Canvas（八）像素操作
sinat_37138973的博客
02-21 992
参考 像素操作 - Web API 接口参考 | MDN ImageData对象 ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性： width 图片宽度，单位是像素 height 图片高度，单位是像素 data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。 data属性返回一个Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes.
canvas图像像素处理-createImageData()(二)
汉堡请不要欺负面条
03-03 7170
createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 createImageData函数有两种函数原型，其语法分别如下所示 (1).createImageData(sw, sh); 其一，返回指定大小的imageData对象。 (2).createImageData(imagedata); 其二，返回与指定对象相同大小的imageData对象。 首先需要知道的是，通过createImageData返回的是一个空的imageData对象，必须要针对其像素进行赋
canvas像素操作
weixin_33781606的博客
03-21 450
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5 Canvas与JavaScript实现图像操作
"这篇资源主要介绍了如何使用JavaScript在HTML5的canvas标签下进行基本的图形操作和处理，包括像素级操作、图像格式转换以及解决跨域图像处理的安全问题。此外，还提到了FileReader和canvas的结合使用，以便读取和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值