canvas做的滤镜效果-CSDN博客

效果图

html结构

<!DOCTYPE html>

<html>

<head>

<title>Canvas</title>

</head>

<body>

</div>

<a href="javascript:greyEffect()">Filter</a>

<a href="javascript:blackEffect()">blackEffect</a>

<a href="javascript:reverseEffect()">reverseEffect</a>

<a href="javascript:blurEffect()">blurEffect</a>

<a href="javascript:mosaicEffect()">mosaicEffect</a>

</div>

</body>

</html>

css样式

.container-div{

margin: 20px auto;

width: 1700px;

}

.wh-canvas{

width: 800px;

height: 560px;

}

.clear-div{

clear:both;

}

.option-div{

text-align: center;

margin-top: 50px;

font-size: 20px;

}

</style>

js脚本

var canvasa = document.getElementById("canvasa");

var canvasb = document.getElementById("canvasb");

var contexta = canvasa.getContext("2d");

var contextb = canvasb.getContext("2d");

var image = new Image();

window.onload = function(){

image.src = "autumn.jpg";

image.onload = function(){

contexta.drawImage(image,0,0,canvasa.width,canvasa.height);

}

function mosaicEffect(){

var tmpImageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var tmpPixelData = tmpImageData.data;

var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var pixelData = imageData.data;

var size = 16;

var totalnum = size * size;

for(var i = 0;i < canvasb.height; i+= size){

for(var j = 0; j < canvasb.width ; j += size){

var totalr = 0,totalg = 0,totalb = 0;

for(var dx = 0; dx < size ; dx++){

for(var dy = 0; dy < size; dy++){

var x = i + dx;

var y = j + dy;

var p = x*canvasb.width + y;

totalr += tmpPixelData[p*4 + 0];

totalg += tmpPixelData[p*4 + 1];

totalb += tmpPixelData[p*4 + 2];

}

var p = i * canvasb.width + j;

var resr = totalr / totalnum;

var resg = totalg / totalnum;

var resb = totalb / totalnum;

for(var dx = 0; dx < size; dx ++){

for(var dy = 0; dy < size;dy ++){

var x = i + dx;

var y = j + dy;

var p = x*canvasb.width + y;

pixelData[p * 4+ 0] = resr;

pixelData[p * 4+ 1] = resg;

pixelData[p * 4+ 2] = resb;

}

contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);

}

function blurEffect(){

var tmpImageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var tmpPixelData = tmpImageData.data;

var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var pixelData = imageData.data;

var blurR = 3;

var totalnum = (2*blurR + 1)*(2*blurR + 1);

for (var i = blurR; i < canvasb.height - blurR; i++) {

for (var j = blurR; j < canvasb.width - blurR; j++) {

var totalr = 0,totalg = 0,totalb = 0;

for(var dx = -blurR;dx <= blurR;dx++){

for(var dy = -blurR;dy <= blurR;dy++){

var x = i + dx;

var y = j + dy;

var p = x*canvasb.width + y;

totalr += tmpPixelData[p * 4 + 0];

totalg += tmpPixelData[p * 4 + 1];

totalb += tmpPixelData[p * 4 + 2];

}

var p = i * canvasb.width + j;

pixelData[p*4+0] = totalr / totalnum;

pixelData[p*4+1] = totalg / totalnum;

pixelData[p*4+2] = totalb / totalnum;

}

contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);

}

function reverseEffect(){

var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var pixelData = imageData.data;

for (var i = 0; i < canvasb.width*canvasb.height; i++) {

var r = pixelData[i*4+0];

var g = pixelData[i*4+1];

var b = pixelData[i*4+2];

pixelData[i*4+0] = 255 - r;

pixelData[i*4+1] = 255 - g;

pixelData[i*4+2] = 255 - b;

}

contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);

}

function blackEffect(){

var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);

var pixelData = imageData.data;

for(var i = 0;i < canvasb.width * canvasb.height; i++){

var r = pixelData[i*4+0];

var g = pixelData[i*4+1];

var b = pixelData[i*4+2];

var grey = r*0.3+g*0.59+b*0.11;

if (grey > 125) {

pv = 255;

}else{

pv = 0;

}

pixelData[i*4+0] = pv;

pixelData[i*4+1] = pv;

pixelData[i*4+2] = pv;

}

contextb.putImageData(imageData,0,0,0,0,canvasa.width,canvasa.height);

}

function greyEffect(){

var imageData = contexta.getImageData(0,0,canvasa.width,canvasb.height);

var pixelData = imageData.data;

for(var i = 0;i < canvasb.width * canvasb.height;i++){

var r = pixelData[4*i + 0];

var g = pixelData[4*i + 1];

var b = pixelData[4*i + 2];

var grey = r*0.3+g*0.59+b*0.11;

pixelData[4*i + 0] = grey;

pixelData[4*i + 1] = grey;

pixelData[4*i + 2] = grey;

}

contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);

}

</script>

本文转自素颜猪 51CTO博客，原文链接:

http://blog.51cto.com/suyanzhu/1894018