<canvas > <p>The canvas element is not supported!</p> </canvas> <canvas > <p>The canvas element is not supported!</p> </canvas> <br> <button>无绿色</button> <button>无蓝色</button> <button>灰度</button> <button>黑白</button> <button>反色</button> <script> if(drawing1.getContext){ var cxt1 = drawing1.getContext('2d'); var cxt2 = drawing2.getContext('2d'); var img = new Image(); img.src="chunfen.jpg"; img.onload = function(){ cxt1.drawImage(img,0,0); function filter(fn){ var imageData = cxt1.getImageData(0,0,img.width,img.height); cxt2.clearRect(0,0,drawing2.width,drawing2.height); var data = imageData.data; for(var i = 0, len = data.length; i < len; i+=4){ fn(data,i) } imageData.data = data; cxt2.putImageData(imageData,0,0); } function fnNoGreen(data,i){ data[i+1] = 0; } function fnNoBlue(data,i){ data[i+2] = 0; } function fnReverse(data,i){ var red = data[i]; var green = data[i+1]; var blue = data[i+2]; var alpha = data[i+3]; data[i] = 255 - red; data[i+1] = 255 - green; data[i+2] = 255 - blue; } function fnToGrey(data,i){ var red = data[i]; var green = data[i+1]; var blue = data[i+2]; var alpha = data[i+3]; var average = Math.floor((red+green+blue)/3); data[i] = data[i+1] = data[i+2] = average; } function fnToBlackWhite(data,i){ var red = data[i]; var green = data[i+1]; var blue = data[i+2]; var alpha = data[i+3]; var average = Math.floor((red+green+blue)/3); if(average > 255/2){ var result = 255; }else{ var result = 0; } data[i] = data[i+1] = data[i+2] = result; } toGrey.onclick = function(){ filter(fnToGrey); } noGreen.onclick = function(){ filter(fnNoGreen); } noBlue.onclick = function(){ filter(fnNoBlue); } toBlackWhite.onclick = function(){ filter(fnToBlackWhite); } reverse.onclick = function(){ filter(fnReverse); } } } </script>
马赛克效果
【普通模糊效果】
普通模糊效果不仅需要使用当前像素点，还需要使用周围的像素点，并把这些像素点都赋予平均值
function fnToBlur(n){ cxt2.clearRect(0,0,drawing2.width,drawing2.height); var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); var tempImageData = imageData; var data = imageData.data; var tempData = tempImageData.data; var blurR = n; var totalnum = (2*blurR + 1)*(2*blurR + 1); for(var i = blurR; i < drawing2.height - blurR; i++){ for(var j = blurR; j < drawing2.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*drawing2.width + y; totalr += tempData[p*4+0]; totalg += tempData[p*4+1]; totalb += tempData[p*4+2]; } } var p = i*drawing2.width + j; data[p*4+0] = totalr / totalnum; data[p*4+1] = totalg / totalnum; data[p*4+2] = totalb / totalnum; } } imageData.data = data; cxt2.putImageData(imageData,0,0); }
【马赛克效果】
马赛克效果则是把一块区域的值，全部都赋予平均值
function fnToMosaic(n){ cxt2.clearRect(0,0,drawing2.width,drawing2.height); var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); var tempImageData = imageData; var data = imageData.data; var tempData = tempImageData.data; var size = n; var totalnum = size*size; for(var i = 0; i < drawing2.height; i+=size){ for(var j = 0; j < drawing2.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*drawing2.width + y; totalr += tempData[p*4+0]; totalg += tempData[p*4+1]; totalb += tempData[p*4+2]; } } var p = i*drawing2.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*drawing2.width + y; data[p*4+0]= resr; data[p*4+1]= resg; data[p*4+2]= resb; } } } } imageData.data = data; cxt2.putImageData(imageData,0,0); }
下面是一个实例
<canvas > <p>The canvas element is not supported!</p> </canvas> <canvas > <p>The canvas element is not supported!</p> </canvas> <br> <button>轻度模糊</button> <button>重度模糊</button> <button>轻度马赛克</button> <button>重度马赛克</button> <script> if(drawing1.getContext){ var cxt1 = drawing1.getContext('2d'); var cxt2 = drawing2.getContext('2d'); var img = new Image(); img.src="chunfen.jpg"; img.onload = function(){ cxt1.drawImage(img,0,0); toLightBlur.onclick = function(){ fnToBlur(1); } toHeavyBlur.onclick = function(){ fnToBlur(3); } toLightMosaic.onclick = function(){ fnToMosaic(4); } toHeavyMosaic.onclick = function(){ fnToMosaic(9); } function fnToBlur(n){ cxt2.clearRect(0,0,drawing2.width,drawing2.height); var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); var tempImageData = imageData; var data = imageData.data; var tempData = tempImageData.data; var blurR = n; var totalnum = (2*blurR + 1)*(2*blurR + 1); for(var i = blurR; i < drawing2.height - blurR; i++){ for(var j = blurR; j < drawing2.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*drawing2.width + y; totalr += tempData[p*4+0]; totalg += tempData[p*4+1]; totalb += tempData[p*4+2]; } } var p = i*drawing2.width + j; data[p*4+0] = totalr / totalnum; data[p*4+1] = totalg / totalnum; data[p*4+2] = totalb / totalnum; } } imageData.data = data; cxt2.putImageData(imageData,0,0); } function fnToMosaic(n){ cxt2.clearRect(0,0,drawing2.width,drawing2.height); var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); var tempImageData = imageData; var data = imageData.data; var tempData = tempImageData.data; var size = n; var totalnum = size*size; for(var i = 0; i < drawing2.height; i+=size){ for(var j = 0; j < drawing2.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*drawing2.width + y; totalr += tempData[p*4+0]; totalg += tempData[p*4+1]; totalb += tempData[p*4+2]; } } var p = i*drawing2.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*drawing2.width + y; data[p*4+0]= resr; data[p*4+1]= resg; data[p*4+2]= resb; } } } } imageData.data = data; cxt2.putImageData(imageData,0,0); } } } </script>
以上这篇使用canvas进行图像编辑的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: