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>