如何使用HTML5 Canvas像素處理能力調整圖像的對比度?我已經成功地很容易地改變圖像的亮度,但對比似乎更復雜一些。HTML5畫布對比度濾鏡
有誰知道一個算法,我可以遵循或可能採樣的JavaScript代碼,我可以採取的想法?
在此先感謝有關此問題的任何幫助。
如何使用HTML5 Canvas像素處理能力調整圖像的對比度?我已經成功地很容易地改變圖像的亮度,但對比似乎更復雜一些。HTML5畫布對比度濾鏡
有誰知道一個算法,我可以遵循或可能採樣的JavaScript代碼,我可以採取的想法?
在此先感謝有關此問題的任何幫助。
既然你說過你已經調整了亮度,聽起來你所需要的只是對比度調整算法,這裏是C#方法的一個線程(查看Update 2),代碼的邏輯是合理的,並且可以工作任何程序:
Adjust the contrast of an image in C# efficiently - Stack Overflow
退房Pixastic提供了很多很棒的效果,你可以玩樣品Editor來看看一些功能。 Pixastic brightness/contrast example
繼承人一個演示我掀起了對比馬里奧。
也簽了它如何工作落實到你的代碼,如果你不希望使用全庫的想法pixastic github source code for the contrast method。
,我將發佈演示中,所有過濾器。 您可以通過編號或類在畫布上輕鬆使用此功能。 但問題是,你不能用畫布渲染這意味着你不保存這個或預覽。因爲畫布無法呈現樣式。
代碼
<!-- 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>
謝謝,我設法重新寫它在JavaScript中,它使用-100到100範圍滑塊完美工作。 – mfreitas
謝謝!我也用JS重寫了它,供我使用! –