canvas濾鏡效果實(shí)現(xiàn)代碼
更新時(shí)間：2017年02月06日 15:56:19 作者：藍(lán)丶木魚
這篇文章主要為大家詳細(xì)介紹了canvas濾鏡效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了canvas實(shí)現(xiàn)濾鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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()">藍(lán)色濾鏡</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中的畫圖環(huán)境
var oldcontext = oldcanvas.getContext('2d');
//獲取到canvas元素
var nowcanvas = document.getElementById('nowCanvas');
//獲取canvas中的畫圖環(huán)境
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 四個(gè)值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//計(jì)算獲取單位元素的RBG然后取平均值 然后復(fù)制給自身得到灰色的圖像
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;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//底片效果
function copy2(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//將所有的RGB值重新賦值（底片效果 = 255 - 當(dāng)前的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];
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//黑白效果
function copy3(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//計(jì)算獲取單位元素的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;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//浮雕效果
function copy4(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//浮雕效果的算法：當(dāng)前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;
//計(jì)算獲取單位元素的RBG然后取平均值 再次灰度，優(yōu)化浮雕的效果
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;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//綠色濾鏡
function copy5(){
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
for(var i=0;i<imgdata.data.length;i += 4){
//綠色濾鏡的算法：當(dāng)前綠色通道值G*1.4得到綠色濾鏡
var g =imgdata.data[i+1]*1.4;
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i+1] =g>255 ? 255 : g;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//藍(lán)色濾鏡
function copy6() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//藍(lán)色濾鏡的算法：當(dāng)前藍(lán)色通道值變?yōu)樵瓉淼?.6得到藍(lán)色濾鏡
var b = imgdata.data[i + 2] * 1.6;
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i + 2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//紅色濾鏡
function copy7() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//紅色濾鏡的算法：當(dāng)前紅色通道值變?yōu)樵瓉淼?得到紅色濾鏡
var r = imgdata.data[i] * 2;
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//黃色濾鏡
function copy8() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
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
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
imgdata.data[i+1] = g > 255 ? 255 : g;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//紫色濾鏡
function copy9() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//紫色濾鏡的算法：紅色通道值和藍(lán)色通道值增加50（紅色+藍(lán)色 = 紫色）
var r = imgdata.data[i] +50;
var b = imgdata.data[i+2] +50
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i] = r > 255 ? 255 : r;
imgdata.data[i+2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
//青色濾鏡
function copy10() {
//獲取ImageData的屬性：width，height，data（包含 R G B A 四個(gè)值）；
var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
for (var i = 0; i < imgdata.data.length; i += 4) {
//青色濾鏡的算法：綠色通道值和藍(lán)色通道值增加50（綠色+藍(lán)色 = 青色）
var g = imgdata.data[i+1] +50;
var b = imgdata.data[i+2] +50
//注：當(dāng)前值大于255時(shí)將其賦值255
imgdata.data[i+1] = g > 255 ? 255 : g;
imgdata.data[i+2] = b > 255 ? 255 : b;
}
//將圖像信息繪制第二個(gè)canvas中，注：一般只能在服務(wù)下運(yùn)行
nowcontext.putImageData(imgdata,0,0);
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Yii2使用Bootbox插件實(shí)現(xiàn)自定義彈窗
Bootbox.js 是一個(gè)小型的 JavaScript 庫用來創(chuàng)建簡單的可編程對話框，基于 Twitter 的 Bootstrap 開發(fā)。今天我們就來研究下，如何使用bootbox插件來實(shí)現(xiàn)自定義彈窗。2015-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解,本文講解了對棧的操作、對棧的實(shí)現(xiàn)實(shí)例等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要針對javascript模塊化為大家進(jìn)行簡單解析，如何寫一個(gè)模塊，在頁面中加載模塊的方法，感興趣的小伙伴們可以參考一下2016-04-04
深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)
這篇文章主要介紹了深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了微信小程序 swiper 組件遇到的問題及解決方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Whatever:hover 無需javascript讓IE支持豐富偽類
絕大部分現(xiàn)代瀏覽器支持 css 中的 :hover 偽類選擇器，可以用于所有 html 元素。2010-06-06
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下2014-02-02
這篇文章介紹了js單例模式的兩種方案，有需要的朋友可以參考一下2013-10-10
做項(xiàng)目時(shí)遇到一個(gè)數(shù)據(jù)表需要展示，由于堅(jiān)定著使用合理標(biāo)簽表示合適內(nèi)容，于是使用了table，悲劇開始了。2010-01-01
js分解url參數(shù)（面向?qū)ο?極簡主義法應(yīng)用）
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個(gè)分解url參數(shù)面試題，我作了一下修改，記錄下來2012-08-08