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>