canvas滤镜效果实现代码
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像 滤镜原理解释: 1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为 复制代码 代码如下: newr = (r * 0.272) + (g
-
用css滤镜实现的文字描边效果的代码
注意:当与背景图同时出现时,会出现不兼容. a { position:absolute; color:white; filter: Dropshadow(offx=1,offy=0,color=red) Dropshadow(offx=0,offy=1,color=red) Dropshadow(offx=0,offy=-1,color=red) Dropshadow(offx=-1,offy=0,color=red); } 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
css静态滤镜 + A:Hover 效果第1/3页
IE Only Step1: WU XIN * { margin:0px; padding:0px; } .i1 { width:64px; border:0px none #888; margin:0px; } .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:blo
-
用css alpha 滤镜 实现input file 样式美化代码
在WEB上传文件时,要用到上传框: <input type="file" id="f" name="f"> 这东东在IE(其他偶没经过测试)中是一个非常特殊的对象. 如果是您手动写入的或其他对象经过某些事件触发填入的值 ,由于安全问题,在进行提交表单时,往往会被清空,所以上传失败. 简单点说,除非你的鼠标亲自点到了上传框f上,IE才会给你上传文件! 哪怕你将 f 的onclick句柄赋给某个对象,如: <in
-
css滤镜效果（二）
7.Gray ,Invert,Xray 滤镜 语法:{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图:Invert滤镜是把对象的可视化属性全部翻转,包括色彩.饱和度.和亮度值:Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的"X"光片. 效果如下: 8.Light 滤镜 语法:Filter{light} 这个属性模拟光源的投射效果.一旦为对象定义了"LIGHT"滤镜属性,那
-
css滤镜效果（一）
1.Alpha 滤镜 语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)} "Alpha"属性是把一个目标元素与背景混合.设计者可以指定数值来控制混合的程度.这种"与背景混合"通俗地说就是一个元素的透明度.通过指定坐标,可以指定点.线.面的透明度.他们的
-
css滤镜实现页面灰色黑白色效果代码
淘宝的代码 复制代码 代码如下: html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } CSS3 greyscale 滤镜实现 如下测试代码: 复制代码 代码如下: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: graysc
-
js模拟滤镜的图片渐显效果
无标题文档 #pshow{margin:auto;width:180px;height:137px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} /*ImageChange Start*/ var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=4,nowImage,startOpacity; var imageLink=new Array
-
CSS滤镜参考
语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparameter1.fparameter2等是滤镜的参数) script 语法:HTMLElement.filters.filterName.fParameter=value; 滤镜说明: Alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 Chroma:制作专用颜色透明 DropShadow:创建对象的固定影子 F
-
CSS滤镜示范(filter)附源代码(静态滤镜)
filter(css滤镜) body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF; } tr,td { padding: 0px; border: 1px solid #0000FF; } filter视觉滤镜的种类 Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) G