canvas 像素操作

像素，即像素点，一个像素只有一个颜色

100*100 的 px 的屏幕区域有 100*100*4 个像素点，即 width*height*4

rgba(0, 0, 0, 1);    在 css 中透明的范围为 0-1

rgba(0, 0, 0, 255);    在 canvas 中透明的范围也为 0-255

读取空白画布的像素点，为黑色透明色 (0, 0, 0, 0)____即使画布设置颜色为 red

所以，一般读取 绘画 的像素点

  • 读取已有像素，改写后再绘制

// 1. 读取矩形像素信息    参数1，参数2    矩形左上角坐标

var imgData = pen.getImageData(100, 100, 100, 100);    参数3，参数4    矩形的 width 和 height

// 2. 改变像素

for(var i=0; i<imgData.data.length; i++){

imgData.data[4*i+0] = 144;

imgData.data[4*i+1] = 144;

imgData.data[4*i+2] = 144;

imgData.data[4*i+3] = 144;

}

// 3. 将改变的像素数组，绘制带画布 (100, 100) 区域

pen.putImageData(imgData, 100, 100);    

  • 自建一个像素数据数据，改写后绘制

// 1. 创建像素对象    返回的像素数组，也是黑色透明色 (0, 0, 0, 0);

var imgData = pen.createImagData(100, 100);

// 2. 改变像素信息

for(var i=0; i<imgData.length; i++){

imgData.data[4*i+0] = 14;

imgData.data[4*i+1] = 164;

imgData.data[4*i+2] = 154;

imgData.data[4*i+3] = 255;

}

// 3. 写入已改变像素点 数组

pen.putImageData(imgData, 100, 100);

单个像素写入操作 (封装)

1. 获取画布所有像素点的信息

var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);

2. 设置 (99, 99) 点 为 蓝色

setPxInfo(imgData, 99, 99, [0, 0, 255, 0]);

3. 函数封装

  • function setColorPos(imgArr, x, y, rgba){
    
    imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0];
    
    imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1];
    
    imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2];
    
    imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3];
    
};

读取单个像素颜色操作 (封装)

1. 获取画布所有像素点的信息

var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);

2. 设置 (99, 99) 点 为 蓝色

getPxInfo(imgData, 99, 99);

3. 函数封装

  • function getColorPos(imgArr, x, y){
    
    var rgba = [];
    
    rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0];
    
    rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1];
    
    rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2];
    
    rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3];

    return rgba;
    
};

图片马赛克处理 案例

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
    
        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            #wrap {
    
                display: flex;
    
                flex-direction: column;
    
                justify-content: center;
    
                align-items: center;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="wrap"></div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">
    
            //                创建 画布的width  画布的height  背景颜色 父元素
    
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
    
                var myCanvas = document.createElement("canvas");
    
                myCanvas.width = canvasWidth;
    
                myCanvas.height = canvasHeight;
    
                myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
    
                if(bgColor){
    
                    myCanvas.style.backgroundColor = bgColor;
    
                };
    
                if(parentObj){
    
                    parentObj.appendChild(myCanvas);
    
                };

                return myCanvas;
    
            };

            var wrap = document.getElementById("wrap");
    
            var myCanvas = createCanvasTo(1040, 480, "#eee", wrap);

            // 获取画笔
    
            var pen = myCanvas.getContext("2d");
    
            pen.fillStyle = 'olive';    // 填充的颜色
    
            pen.strokeStyle = "blue";    //  笔的颜色
    
            pen.lineWidth = 4;    // 笔宽
    
            pen.lineCap = "round";    // 圆形结束
    
            pen.lineJoin = "round";    // 圆角

            // 开始绘制
    
            var imgObj = new Image();
    
            imgObj.src = "./img/Nick.jpg";
    
            imgObj.onload = function(){
    
                pen.drawImage(imgObj, 0, 0, 520, 480);

                var imgData = pen.getImageData(0,0,520,480);

                size = 5;
    
                var i = 0,
    
                    j = 0,
    
                    a = 0,
    
                    b = 0;
    
                for(i=0; i<imgData.width; i++){
    
                    for(j=0; j<imgData.height; j++){
    
                        var colorPoint = getColorPos(   imgData,
    
                                                        Math.floor(i*size+Math.random()*size),
    
                                                        Math.floor(j*size+Math.random()*size));

                        for(a=0; a<size; a++){
    
                            for(b=0; b<size; b++){
    
                                setColorPos(imgData, i*size+a, j*size+    b, colorPoint);
    
                            };
    
                        };
    
                    };
    
                };
    
                pen.putImageData(imgData, 520, 0);
    
            };

            function getColorPos(imgArr, x, y){
    
            var rgba = [];
    
            rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0];
    
            rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1];
    
            rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2];
    
            rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3];

            return rgba;
    
        };

        function setColorPos(imgArr, x, y, rgba){
    
            imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0];
    
            imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1];
    
            imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2];
    
            imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3];
    
        };

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

图片反相处理

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>图片反相</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            #wrap {
    
                display: flex;
    
                flex-direction: column;
    
                justify-content: center;
    
                align-items: center;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="wrap"></div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">
    
            //                创建 画布的width  画布的height  背景颜色 父元素
    
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
    
                var myCanvas = document.createElement("canvas");
    
                myCanvas.width = canvasWidth;
    
                myCanvas.height = canvasHeight;
    
                myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
    
                if(bgColor){
    
                    myCanvas.style.backgroundColor = bgColor;
    
                };
    
                if(parentObj){
    
                    parentObj.appendChild(myCanvas);
    
                };

                return myCanvas;
    
            };

            var wrap = document.getElementById("wrap");
    
            var myCanvas = createCanvasTo(520*3, 480, "#eee", wrap);

            var imgObj = new Image();
    
            imgObj.src = "./img/Nick.jpg";
    
            imgObj.onload = function(){
    
                var pen = myCanvas.getContext("2d");
    
                pen.drawImage(imgObj, 0, 0, 520, 480);
    
                pen.drawImage(imgObj, 520, 0, 520, 480);

                var pxObj = pen.getImageData(520+100, 100, 100, 160);
    
                setColorInversion(pxObj);
    
                pen.putImageData(pxObj, 520+100, 100);

                pxObj = pen.getImageData(0, 0, 520, 480);
    
                setColorInversion(pxObj);
    
                pen.putImageData(pxObj, 520*2, 0);
    
            };

            function setColorInversion(pxObj){
    
                var i = 0;
    
                var j = 0;
    
                for(i=0; i<pxObj.width; i++){
    
                    for(j=0; j<pxObj.height; j++){
    
                        pxObj.data[(pxObj.width*j+i)*4+0] = 255 - pxObj.data[(pxObj.width*j+i)*4+0];
    
                        pxObj.data[(pxObj.width*j+i)*4+1] = 255 - pxObj.data[(pxObj.width*j+i)*4+1];
    
                        pxObj.data[(pxObj.width*j+i)*4+2] = 255 - pxObj.data[(pxObj.width*j+i)*4+2];
    
                        pxObj.data[(pxObj.width*j+i)*4+3] = 150;
    
                    };
    
                };
    
            };
    
        </script>
    
    </body>
    
</html>

HTML5_canvas_像素操作_图片马赛克_图片反相的更多相关文章

  1. HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题

    canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele    将 img 元素 加载到画布上 步骤 1. 创建一个 ...

  2. CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站

    CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站 CLOSE-UP FORMA ...

  3. PHP图片裁剪_图片缩放_PHP生成缩略图

    在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...

  4. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  5. 2.4.5 用NPOI操作EXCEL－－插入图片

    我们知道,在Excel中是可以插入图片的.操作菜单是“插入->图片”,然后选择要插入图片,可以很容易地在Excel插入图片.同样,在NPOI中,利用代码也可以实现同样的效果.在NPOI中插入图片 ...

  6. JAVA之旅（二十六）——装饰设计模式，继承和装饰的区别，LineNumberReader，自定义LineNumberReader，字节流读取操作，I/O复制图片

    JAVA之旅(二十六)--装饰设计模式,继承和装饰的区别,LineNumberReader,自定义LineNumberReader,字节流读取操作,I/O复制图片 一.装饰设计模式 其实我们自定义re ...

  7. PPT导出图片质量太差?简单操作直接导出印刷质地图片

    PPT导出图片质量太差?简单操作直接导出印刷质地图片    ​ PPT不仅可以用于展示文档,还可以用于简单图片合成处理,同时,PPT文档还可以全部导出为图片. 默认情况下,PPT导出的图片为96DPI ...

  8. Java学习笔记——IO操作之以图片地址下载图片

    以图片地址下载图片 读取给定图片文件的内容,用FileInputStream public static byte[] mReaderPicture(String filePath) { byte[] ...

  9. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

随机推荐

  1. 第九节：基于MVC5+AutoFac+EF+Log4Net的基础结构搭建

    一. 前言 从本节开始,将陆续的介绍几种框架搭建组合形式,分析每种搭建形式的优势和弊端,剖析搭建过程中涉及到的一些思想和技巧. (一). 技术选型 1. DotNet框架:4.6 2. 数据库访问:E ...

  2. MyEclipse 2015 Stable 2.0破解方法

    本篇博文简单介绍一下利用网上说明的方法破解MyEclipse 2015 Stable 2.0的具体细节.因为原来在贴吧上的方法不够详细,所以本人重新整理了一下.方法源自:http://tieba.ba ...

  3. 携程apollo系列-个人开发环境搭建

    本博客讲详细讲解如何在 Windows 搭建携程 Apollo 服务器 (用户个人开发). 开发服务器有多种搭建方式:(1) docker, 搭建过程非常简单, 推荐有 docker 环境(2) 部署 ...

  4. javascript没有长整型

    记录一下前几天踩坑的经历. 背景:一个项目某一版之后很多用easyui的表格控件treegrid渲染的表格都显示不出来了 奇怪的地方主要有以下几点: 项目在测试环境才会这样,在本机能够正常运行,多次重 ...

  5. day 13 - 1 迭代器

    迭代器 首先我们查看下列类型拥有的所有方法(会显示很多) print(dir([])) print(dir({})) print(dir('')) print(dir(range(10))) #求下上 ...

  6. url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】

    引子 浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encode ...

  7. FTP:mget匹配文件名后下载

    需求:从FTP某目录取每日构建的apk下载到本地 难点:文件名中有构建时间,而这个时间不算固定值,因此文件名不固定 解决方案:mget匹配文件名后下载 BAT版本: :: Filename:Proje ...

  8. k64 datasheet学习笔记26--Oscillator (OSC)

    1.前言 OSC模块是一个晶体振荡器. 该模块使用晶体或谐振器与外部连接,为MCU产生一个参考时钟. 主要为下图红色框住的部分 2.特性和模式 Supports 32 kHz crystals (Lo ...

  9. 【原创】大数据基础之Hive（1）Hive SQL执行过程之代码流程

    hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...

  10. 【转载】Vue自定义指令实现pc端加载更多

    转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...