HTML and CSS Reference
In-Depth Information
from
listing 8.15
with this new code (retaining the composition mode binding to
$('select')
):
Listing 8.17. index.html—Change the opacity in the
draw()
function
Step 4: Grayscale the video being played back
The
<canvas>
element is also a general-purpose, image-processing tool, thanks to its
.getImageData
and
.putImageData
methods. These methods directly access the
array of pixels making up the canvas. Once you have the pixels, you can implement stand-
ard image-processing algorithms in JavaScript. The next listing is a JavaScript implement-
ation of an algorithm to turn an image gray. This code can be included anywhere inside
your
<script>
element.
Listing 8.18. index.html—A function to make an image grayscale
function
grayscale
(
pixels
) {
var
d
=
pixels
.
data
;
for
(
var
i
=
0
;
i
<
d
.
length
;
i
+=
4
) {
var
r
=
d
[
i
];
var
g
=
d
[
i
+
1
];
var
b
=
d
[
i
+
2
];
