canvas 之圖片模糊&馬賽克
阿新 • • 發佈：2019-01-26
<!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; //benshen
xiugaiPxData[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
// 1 o o o o o
// 2 o o o o o
// 3 o 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>