HTML5 画布对比度滤镜
HTML5 Canvas contrast filter
如何使用HTML5 Canvas像素操作功能调整图像的对比度？我已经非常轻松地改变了图像的亮度，但对比度似乎有点复杂。
有谁知道我可以遵循的算法，或者我可以从中获取想法的示例 JavaScript 代码？
提前感谢有关此问题的任何帮助。
既然你说你已经调整了亮度，听起来你所需要的只是对比度调整的算法，这是一个 C# 方法的线程（查看更新 2），代码的逻辑是合理的，可以在任何程序中工作：
在 C# 中高效调整图像的对比度 - 堆栈溢出
我将发布所有过滤器的演示。您可以按 ID 或类轻松地在画布上使用它。但问题是你不能用 Canvas 渲染它意味着你不保存它或预览。因为画布无法呈现样式。
法典
<!-- canvas -->
<html>
<head>
<style>
img {
width: 33%;
height: auto;
float: left;
}
.origional {filter:none;}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
//origional canvas image
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("origional");
ctx.drawImage(img, 0, 0,300,300);
$('#button').click(function() {
canvas.classList.add("origional");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button1').click(function() {
canvas.classList.add("blur");
canvas.classList.remove("origional");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button2').click(function() {
canvas.classList.add("brightness");
canvas.classList.remove("blur");
canvas.classList.remove("origional");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button3').click(function() {
canvas.classList.add("contrast");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("origional");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button4').click(function() {
canvas.classList.add("grayscale");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("origional");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button5').click(function() {
canvas.classList.add("huerotate");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("origional");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button6').click(function() {
canvas.classList.add("invert");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("origional");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button7').click(function() {
canvas.classList.add("opacity");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("origional");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button8').click(function() {
canvas.classList.add("saturate");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("origional");
canvas.classList.remove("sepia");
canvas.classList.remove("shadow");
});
$('#button9').click(function() {
canvas.classList.add("sapia");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("origional");
canvas.classList.remove("shadow");
});
$('#button10').click(function() {
canvas.classList.add("shadow");
canvas.classList.remove("blur");
canvas.classList.remove("brightness");
canvas.classList.remove("contrast");
canvas.classList.remove("grayscale");
canvas.classList.remove("huerotate");
canvas.classList.remove("invert");
canvas.classList.remove("opacity");
canvas.classList.remove("saturate");
canvas.classList.remove("sepia");
canvas.classList.remove("origional");
});
});
</script>
</head>
<body>
<h1>
canvas
</h1>
<canvas id="canvas" width="300" height="300" ></canvas>
<br>
<div ><input type="button" id="button" value="origional" />
<input type="button" id="button1" value="blur" />
<input type="button" id="button2" value="brightness" />
<input type="button" id="button3" value="contrast" />
<input type="button" id="button4" value="grayscale" />
<input type="button" id="button5" value="huerotate" />
<input type="button" id="button6" value="invert" />
<input type="button" id="button7" value="opacity" />
<input type="button" id="button8" value="saturate" />
<input type="button" id="button9" value="sepia" />
<input type="button" id="button10" value="shadow" />
</div>
<br>
<!-- image -->
<h1>
image
</h1>
<img id="origional" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img id="blur" class="blur" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
这里现场演示
查看 Pixastic 提供了大量出色的效果，您可以使用示例编辑器查看一些功能。像素亮度/对比度示例
这是我制作的一个对比马里奥的演示。
现场演示
另请查看对比方法的 Pixastic GitHub 源代码，了解如果您不想使用整个库，可以了解如何将其实现到您的代码中。
相关文章：
- 可以在这里为背景图像设置滤镜吗
- 使用 GSAP 对模糊滤镜进行动画处理
- 在没有滤镜的情况下模糊背景
- Kineticjs 将 Mask 滤镜应用于图层
- 将特殊效果应用于所选滤镜
- 角度滤镜不打印空格
- HTML5 画布对比度滤镜
- 如何在IE中将灰度和反转效果与SVG滤镜相结合
- 角度滤镜和 NgAnimate 冲突
- 根据滤镜的值有条件地添加 ng-animate 指令
- D3:将滤镜作为背景添加到SVG元素
- 如何为图像添加滤镜(模糊）
- 推特打字，寻血猎犬滤镜开始
- 从一个画布复制带有滤镜的图像并粘贴到另一个画布
- Array.滤镜打破狩猎印花
- Kinetijs:应用滤镜后阴影模糊不起作用
- HTML5画布不能应用sw滤镜
- 选择滤镜不适用于cellTemplate, angular ui-grid
- 如何为对象制作滤镜
- 用CanvasRenderingContext2D滤镜保存画布
