DDR爱好者之家 Design By 杰米
本文实例为大家分享了canvas实现滤镜效果的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新日志
2024年11月28日
2024年11月28日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]