效果图
html结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Canvas</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container-div">
<canvas id="canvasa" class="wh-canvas"></canvas>
<canvas id="canvasb" class="wh-canvas"></canvas>
</div>
<div class="clear-div"></div>
<div class="option-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样式
<style type="text/css" media="screen">
.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脚本
<script type="text/javascript" charset="utf-8">
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>
转载于:https://blog.51cto.com/suyanzhu/1894018