canvas 之图片模糊&马赛克

来源：互联网发布：python tempfile模块编辑：程序博客网时间：2024/04/30 01:33

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">canvas{border: 1px solid red;}</style></head><body><canvas id="vanvas1" width="100" height="100"></canvas><canvas id="vanvas2" width="100" height="100"></canvas><button id="btn">btn</button><button id="mohu">模糊</button><button id="mask">马赛克</button></body><script type="text/javascript">var canvas1 = document.getElementById("vanvas1");var canvas2 = document.getElementById("vanvas2");var context1 = canvas1.getContext("2d");var context2 = canvas2.getContext("2d");var cw = canvas1.width;var ch = canvas1.height;mohu.onclick = function(){//用来循环var xunhuanImgData = context1.getImageData(0,0,100,100);var xunhuanPxData = xunhuanImgData.data;//循环修改var xiugaiImgData = context1.getImageData(0,0,100,100);var xiugaiPxData = xiugaiImgData.data;var quan = 4;for(var i=quan;i<cw-quan;i++){for(var j=quan;j<ch-quan;j++){//var p = j*cw+i; // 当前元素 ...shanchu.var sumR = 0;var sumG = 0;var sumB = 0;//找他周围的元素，，for(var x = -quan;x<=quan;x++){for(var y = -quan;y<=quan;y++){var xx = i+x;var yy = j+y;var pp = yy*cw+xx; //周围的元素。sumR += xunhuanPxData[pp*4+0];sumG += xunhuanPxData[pp*4+1];sumB += xunhuanPxData[pp*4+2];}}var totlal = (2*quan+1)*(2*quan+1);var avgR = sumR/totlal;var avgG = sumG/totlal;var avgB = sumB/totlal;var p = j*cw+i;   //benshenxiugaiPxData[p*4+0] = avgR;xiugaiPxData[p*4+1] = avgG;xiugaiPxData[p*4+2] = avgB;}}context2.putImageData(xiugaiImgData,0,0,0,0,100,100);}mask.onclick = function(){//用来循环var xunhuanImgData = context1.getImageData(0,0,100,100);var xunhuanPxData = xunhuanImgData.data;//循环修改var xiugaiImgData = context1.getImageData(0,0,100,100);var xiugaiPxData = xiugaiImgData.data;var quan = 3;for(var i=50;i<80;i = i+2*quan+1){for(var j=50;j<80;j = j+2*quan+1){//var p = j*cw+i; // 当前元素 ...shanchu.var sumR = 0;var sumG = 0;var sumB = 0;//找他周围的元素，，for(var x = -quan;x<=quan;x++){for(var y = -quan;y<=quan;y++){var xx = i+x;var yy = j+y;var pp = yy*cw+xx; //周围的元素。sumR += xunhuanPxData[pp*4+0];sumG += xunhuanPxData[pp*4+1];sumB += xunhuanPxData[pp*4+2];}}var totlal = (2*quan+1)*(2*quan+1);var avgR = sumR/totlal;var avgG = sumG/totlal;var avgB = sumB/totlal;for(var x = -quan;x<=quan;x++){for(var y = -quan;y<=quan;y++){var xx = i+x;var yy = j+y;var pp = yy*cw+xx; //周围的元素。xiugaiPxData[pp*4+0] = avgR;xiugaiPxData[pp*4+1] = avgG;xiugaiPxData[pp*4+2] = avgB;//xiugaiPxData[pp*4+3] = 0~255;}}}}context2.putImageData(xiugaiImgData,0,0,0,0,100,100);}//}var fengjing = new Image();fengjing.src = "qq.jpg";fengjing.onload = function(){context1.drawImage(this,0,0,100,100);}btn.onclick = function(){//1获取canvas1中的图片数据【imgData】var imgData  =context1.getImageData(0,0,100,100);//2从imgData中获取像素数据（pxData）var pxData = imgData.data;//3修改像素for(var i=0;i<10000;i++){//pxData[i*4+0] = 22;   //R 值//pxData[i*4+1] = 41;   //g 值//pxData[i*4+2] = 120;   //b 值//pxData[i*4+0] = 0;   //R 值var r = pxData[i*4+0];var g = pxData[i*4+1];var b = pxData[i*4+2];pxData[i*4+2] = 255-b;pxData[i*4+1] = 255-g;pxData[i*4+0] = 255-r;//pxData[i*4+0] = 255;   //谁=0是就没有了 ，}//4把之前修改过后的结果绘制到canvas2中。//下图解：j: 0123;i:横着的12345个；//0   o o o o o //1o o o o o//2o o o o o//3o o o o o//2方法2  i代表行。j代表高。for(var i=0;i<100;i++){for(var j=0;j<100;j++){var p = (i*j)+i;   //确定元素下标；pxData[p*4+1] = 255;//s随机控制var x = Math.random();if(x<0.2){pxData[p*4+0] = 255;pxData[p*4+1] = 255;pxData[p*4+2] = 255;}//if(1%13==0){//pxData[p*4+0] = 255;//pxData[p*4+1] = 255;//pxData[p*4+2] = 255;//}}}context2.putImageData(imgData,0,0,0,0,100,100);}//模糊度==：》》》》》//本身 = （本身+周围）/ 总数   ,本身 = 平均值

// 本身 +周围 = 平均值》》》马赛克；</script></html>

0 0