HTML5_canvas_像素操作_图片马赛克

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_像素操作_图片马赛克_图片反相的更多相关文章

HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题
canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele 将 img 元素加载到画布上步骤 1. 创建一个 ...
CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站
CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站 CLOSE-UP FORMA ...
PHP图片裁剪_图片缩放_PHP生成缩略图
在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...
基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
2.4.5 用NPOI操作EXCEL－－插入图片
我们知道,在Excel中是可以插入图片的.操作菜单是“插入->图片”,然后选择要插入图片,可以很容易地在Excel插入图片.同样,在NPOI中,利用代码也可以实现同样的效果.在NPOI中插入图片 ...
JAVA之旅（二十六）——装饰设计模式，继承和装饰的区别，LineNumberReader，自定义LineNumberReader，字节流读取操作，I/O复制图片
JAVA之旅(二十六)--装饰设计模式,继承和装饰的区别,LineNumberReader,自定义LineNumberReader,字节流读取操作,I/O复制图片一.装饰设计模式其实我们自定义re ...
PPT导出图片质量太差?简单操作直接导出印刷质地图片
PPT导出图片质量太差?简单操作直接导出印刷质地图片 PPT不仅可以用于展示文档,还可以用于简单图片合成处理,同时,PPT文档还可以全部导出为图片. 默认情况下,PPT导出的图片为96DPI ...
Java学习笔记——IO操作之以图片地址下载图片
以图片地址下载图片读取给定图片文件的内容,用FileInputStream public static byte[] mReaderPicture(String filePath) { byte[] ...
Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析博客分类: SPRING Spring MVC 教程快速入门资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

随机推荐

oldboy s21day13装饰器和推导式
#!/usr/bin/env python# -*- coding:utf-8 -*- # 2.请为 func 函数编写一个装饰器,添加上装饰器后可以实现:执行func时,先输入"befor ...
css中的数学表达式calc()
前言数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念数学表达式calc()是calculate计算的缩写,它允许使用+.-.*. ...
[物理学与PDEs]第1章习题8 磁场分布 $\ra$ 电流分布
设在真空中有一圆柱形磁场 $$\bex B(P)=\sedd{\ba{ll} \cfrac{2I}{Cr},&r\geq R,\\ \cfrac{2I}{CR^2}r,&r<R, ...
MD1——2 Corner
基本句型被分为 5 种全然因为[动词] 造成的. 那么补语就是因为动词被解释成“是”的时候所需要的一种补足. [补语 Complement 传统的毒瘤说法] 不完全不及物动词不完全及物动词~~ ...
nginx php程序文件上传大小限制
关于 PHP 程序上传限制更改 php.ini 配置文件 upload_max_filesize = 5M post_max_size = 16M 通过 nginx 环境限制上传大小: 可以在 ht ...
TPS和QPS 并发量区别；日活访问量活跃度
一.系统承载吞度量系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高,外部系统接口.IO影响速度越慢,系统吞吐能力越低,反之越高 ...
【转】mac环境下Android 反编译
一.需要的工具 apktool:反编译APK文件,得到classes.dex文件,同时也能获取到资源文件以及布局文件. dex2jar:将反编译后的classes.dex文件转化为.jar文件. jd ...
get/post比较
转载: https://www.oschina.net/news/77354/http-get-post-different https://www.cnblogs.com/wswang/p/6054 ...
MinGW GCC 8.1.0 2018年5月2日出炉啦
MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...
阿里云ECS试用配置
1.首先从阿里云找到ECS购买入口(目前在弹性入口的弹出框中).进入ECS购买界面后,选择免费试用. 此处省略试用申请过程. 2.然后再到云市场中购买一个免费的镜像服务.此处为Centos 64位系统 ...

HTML5_canvas_像素操作_图片马赛克_图片反相

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

随机推荐

热门专题