4.5.2.3_黑白滤镜

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>黑白滤镜</title><style>body{background: #eee;}#canvas{background: #fff;cursor: pointer;margin-left: 20px;margin-top: 50px;box-shadow: 4px 4px 8px rgba(0,0,0,0.5);-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);}#controls{position: absolute;top: 20px;left: 50px;}</style></head><body><div id="controls"><input type="checkbox" id="colorToggleCheckbox" />黑白滤镜</div><canvas id="canvas" width="800" height="520"></canvas></body><script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var colorToggleCheckbox = document.getElementById('colorToggleCheckbox');var image = new Image();image.src = 'img/waterfall.jpg';image.onload = function(){drawInColor()}colorToggleCheckbox.onclick = function(){if(colorToggleCheckbox.checked){drawInBlackAndWhite();}else{drawInColor();}}//绘制彩色图像function drawInColor(){context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);}//绘制黑白图像function drawInBlackAndWhite(){var imageData = context.getImageData(0,0,canvas.width,canvas.height);var data = imageData.data;for(var i=0;i<data.length-4;i+=4){average = (data[i]+data[i+1]+data[i+2])/3;data[i] = average;data[i+1] = average;data[i+2] = average;}context.putImageData(imageData,0,0)}</script>
</html>

4.5.2.3_黑白滤镜相关推荐

java用opencv实现滤镜_opencv滤镜-二值化实现黑白滤镜
黑白滤镜黑白滤镜非常简单,顾名思义就是图像只有黑色与白色,这实际上就是图像的二值化.实现的原理也非常地简单,设定一个阈值,假设为128,判断每个像素点的灰度值,大于128设为255(对应白色),小于 ...
opencv滤镜-二值化实现黑白滤镜
黑白滤镜黑白滤镜非常简单,顾名思义就是图像只有黑色与白色,这实际上就是图像的二值化.实现的原理也非常地简单,设定一个阈值,假设为128,判断每个像素点的灰度值,大于128设为255(对应白色),小于 ...
基于HTML5 Canvas实现黑白滤镜
getImageData 和 putImageData 是 HTML5 Canvas两个比较常用的两个 API. 通过getImageData,可以得到canvas指定区域的像素点数组,每个像素点包 ...
Android Camera使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理（黑白滤镜）
第一篇 Android Camera使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理(黑白滤镜) 第二篇 Android Camera使用OpenGL ES 2.0和T ...
canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)
示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...
Android Camera API 2使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理（黑白滤镜）
这段时间有点忙,一直没时间写第三篇教程,其实代码很早之前就写好了.本系列教程会有三篇文章讲解Android平台滤镜的实现方式,希望在阅读本文之前先阅读前面两篇文档. 第一篇 Android Camer ...
Swift - 给图片添加滤镜效果（棕褐色老照片滤镜，黑白滤镜）
Core Image是一个强大的滤镜处理框架.它除了可以直接给图片添加各种内置滤镜,还能精确地修改鲜艳程度, 色泽, 曝光等,下面通过两个样例演示如何给UIImage添加滤镜. 1,棕褐色滤镜 - ...
css给网页添加黑白滤镜
<style type="text/css"> /*给网页添加黑白滤镜*/ html{ /*兼容FF*/ filter ...
android平台下OpenGL ES 3.0给图片添加黑白滤镜
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘 ...

4.5.2.3_黑白滤镜

4.5.2.3_黑白滤镜

4.5.2.3_黑白滤镜相关推荐

最新文章

热门文章