<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas-濾鏡</title> <style> canvas{ border: 1px solid red; float: left; /* background-color:red; */ } </style></head><body> <canvas id="oldCanvas" width="500px" height="300px"> </canvas> <canvas id="nowCanvas" width="500px" height="300px"> </canvas> <button onclick = "copy2()">底片效果</button><br> <button onclick = "copy3()">黑白效果</button><br> <button onclick = "copy4()">浮雕效果</button><br> <button onclick = "copy1()">灰色濾鏡</button><br> <button onclick = "copy5()">綠色濾鏡</button><br> <button onclick = "copy6()">藍色濾鏡</button><br> <button onclick = "copy7()">紅色濾鏡</button><br> <button onclick = "copy8()">黃色濾鏡</button><br> <button onclick = "copy9()">紫色濾鏡</button><br> <button onclick = "copy10()">青色濾鏡</button><br> <script> //獲取到canvas元素 var oldcanvas = document.getElementById('oldCanvas'); //獲取canvas中的畫圖環境 var oldcontext = oldcanvas.getContext('2d'); //獲取到canvas元素 var nowcanvas = document.getElementById('nowCanvas'); //獲取canvas中的畫圖環境 var nowcontext = nowcanvas.getContext('2d'); var img = new Image(); img.src = "./image/liuyifei.jpg"; window.onload = function (){ //繪制圖像 oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height); copy1(); }; //灰度效果 function copy1(){ //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); for(var i=0;i<imgdata.data.length;i += 4){ //計算獲取單位元素的RBG然后取平均值 然后復制給自身得到灰色的圖像 var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3; imgdata.data[i] =avg; imgdata.data[i+1] =avg; imgdata.data[i+2] =avg; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //底片效果 function copy2(){ //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); for(var i=0;i<imgdata.data.length;i += 4){ //將所有的RGB值重新賦值（底片效果 = 255 - 當前的RGB值） imgdata.data[i] =255-imgdata.data[i]; imgdata.data[i+1] =255-imgdata.data[i+1]; imgdata.data[i+2] =255-imgdata.data[i+2]; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //黑白效果 function copy3(){ //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); for(var i=0;i<imgdata.data.length;i += 4){ //計算獲取單位元素的RBG然后取平均值 var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3; imgdata.data[i] =avg>128 ? 255 :0; imgdata.data[i+1] =avg>128 ? 255 :0; imgdata.data[i+2] =avg>128 ? 255 :0; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //浮雕效果 function copy4(){ //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); for(var i=0;i<imgdata.data.length;i += 4){ //浮雕效果的算法：當前RGB減去相鄰的GRB得到的值再加上128 imgdata.data[i] =imgdata.data[i]-imgdata.data[i+4]+128; imgdata.data[i+1] =imgdata.data[i+1]-imgdata.data[i+5]+128; imgdata.data[i+2] =imgdata.data[i+2]-imgdata.data[i+6]+128; //計算獲取單位元素的RBG然后取平均值 再次灰度，優化浮雕的效果 var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3; imgdata.data[i] =avg; imgdata.data[i+1] =avg; imgdata.data[i+2] =avg; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //綠色濾鏡 function copy5(){ //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height); for(var i=0;i<imgdata.data.length;i += 4){ //綠色濾鏡的算法：當前綠色通道值G*1.4得到綠色濾鏡 var g =imgdata.data[i+1]*1.4; //注：當前值大于255時將其賦值255 imgdata.data[i+1] =g>255 ? 255 : g; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //藍色濾鏡 function copy6() { //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height); for (var i = 0; i < imgdata.data.length; i += 4) { //藍色濾鏡的算法：當前藍色通道值變為原來的1.6得到藍色濾鏡 var b = imgdata.data[i + 2] * 1.6; //注：當前值大于255時將其賦值255 imgdata.data[i + 2] = b > 255 ? 255 : b; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //紅色濾鏡 function copy7() { //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height); for (var i = 0; i < imgdata.data.length; i += 4) { //紅色濾鏡的算法：當前紅色通道值變為原來的2得到紅色濾鏡 var r = imgdata.data[i] * 2; //注：當前值大于255時將其賦值255 imgdata.data[i] = r > 255 ? 255 : r; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //黃色濾鏡 function copy8() { //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height); for (var i = 0; i < imgdata.data.length; i += 4) { //黃色濾鏡的算法：紅色通道值和綠色通道值增加50（紅色+綠色 = 黃色） var r = imgdata.data[i] +50; var g = imgdata.data[i+1] +50 //注：當前值大于255時將其賦值255 imgdata.data[i] = r > 255 ? 255 : r; imgdata.data[i+1] = g > 255 ? 255 : g; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //紫色濾鏡 function copy9() { //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height); for (var i = 0; i < imgdata.data.length; i += 4) { //紫色濾鏡的算法：紅色通道值和藍色通道值增加50（紅色+藍色 = 紫色） var r = imgdata.data[i] +50; var b = imgdata.data[i+2] +50 //注：當前值大于255時將其賦值255 imgdata.data[i] = r > 255 ? 255 : r; imgdata.data[i+2] = b > 255 ? 255 : b; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } //青色濾鏡 function copy10() { //獲取ImageData的屬性：width，height，data（包含 R G B A 四個值）； var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height); for (var i = 0; i < imgdata.data.length; i += 4) { //青色濾鏡的算法：綠色通道值和藍色通道值增加50（綠色+藍色 = 青色） var g = imgdata.data[i+1] +50; var b = imgdata.data[i+2] +50 //注：當前值大于255時將其賦值255 imgdata.data[i+1] = g > 255 ? 255 : g; imgdata.data[i+2] = b > 255 ? 255 : b; } //將圖像信息繪制第二個canvas中，注：一般只能在服務下運行 nowcontext.putImageData(imgdata,0,0); } </script></body></html>
新聞熱點
疑難解答
