[英]html5 - how to do the brightness, contrast, saturation, hue up and down?
如何上下應用亮度而不是灰色? 我一直在嘗試,但我只能把它變成灰色。
我的目標是使其亮度上下。
當前代碼:
HTML
<h1>Effects Brightness</h1>
<table>
<tr>
<td style="vertical-align:text-top;">
<h2>BEFORE effect</h2>
<img id="cvs-src" src="/images/a.jpg" width=640 height=480/>
</td>
<td>
<h2>AFTER effect</h2>
<canvas width=1024 height=768></canvas>
</td>
</tr>
</table>
JS
(function() {
window.onload = greyImages;
function greyImages() {
var img = document.getElementById("cvs-src");
var imageData;
var px;
var length;
var i = 0;
var grey;
var can = document.getElementsByTagName("canvas")[0].getContext('2d');
can.drawImage(img, 0, 0);
imageData = can.getImageData(0, 0, 1024, 768);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = px[i+1] = px[i+2] = grey;
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = px[i+1] = px[i+2] = grey;
grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;
px[i] = px[i+1] = px[i+2] = grey;
}
can.putImageData(imageData, 0, 0);
}
})();
編輯:復制並粘貼它
<script>
function greyImages() {
var img = document.getElementById("cvs-src");
var imageData;
var px;
var length;
var i = 0;
var grey;
var can = document.getElementsByTagName("canvas")[0].getContext('2d');
can.drawImage(img, 0, 0);
imageData = can.getImageData(0, 0, 1024, 768);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = grey;
}
can.putImageData(imageData, 0, 0);
}
</script>
<h1>Effects</h1>
<table>
<tr>
<td style="vertical-align:text-top;">
<h2>BEFORE effect</h2>
<button id="take" onclick="greyImages();" />
Download: http://people.opera.com/shwetankd/webm/sunflower.webm
<video id="cvs-src" autoplay="autoplay" src="/images/1.webm"
type="video/webm" width=640 height=480></video>
</td>
<td>
<h2>AFTER effect</h2>
<canvas width=1024 height=768></canvas>
</td>
</tr>
</table>
好的 - 這幾乎適用於亮度上升+下降 -
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function greyImages() {
var img = document.getElementById("cvs-src");
var imageData;
var px;
var length;
var i = 0;
var grey;
var can = document.getElementsByTagName("canvas")[0].getContext('2d');
can.drawImage(img, 0, 0);
imageData = can.getImageData(0, 0, 1024, 768);
px = imageData.data;
length = px.length;
// Grey
// for ( ; i < length; i+= 4 ) {
// grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
// px[i] = grey;
// grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;
// px[i] = px[i+1] = px[i+2] = grey;
// }
// Bright up / down
for ( ; i < length; i+= 4 ) {
px[i] -= 40 ;
px[i+1] -= 40 ;
px[i+2] -= 40 ;
}
// Threshold
// for ( ; i < length; i+= 4) {
// var r = px[i];
// var g = px[i+1];
// var b = px[i+2];
// grey= (0.2126*r + 0.7152*g + 0.0722*b >= 150) ? 255 : 0;
// px[i] = px[i+1] = px[i+2] = grey;
// }
can.putImageData(imageData, 0, 0);
}
$(document).ready(function() {
});
</script>
<h1>Effects</h1>
<table>
<tr>
<td style="vertical-align:text-top;">
<h2>Original</h2>
<button id="take" onclick="greyImages();" />
<video id="cvs-src" autoplay="autoplay" src="/images/1.webm"
type="video/webm" width=640 height=480></video>
</td>
<td>
<canvas width=1024 height=768></canvas>
</td>
</tr>
</table>
看起來你現在可以用ctx.filter = "...";
來做到這一點ctx.filter = "...";
。 請參閱此MDN文章 。
例:
ctx.filter = 'blur(5px) hue-rotate(45deg)';
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.