canvas调节视频颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <canvas id="canvas" width="400" height="300"></canvas>
 9 <script src="main.js"></script>
10 </body>
11 </html>

 1 (function () {
 2     var videoWidth = 320;
 3     var videoHeight = 240;
 4     var canvas = document.getElementById("canvas");
 5     var memoryCanvas = document.createElement("canvas");
 6     memoryCanvas.width = 400;
 7     memoryCanvas.height = 300;
 8     var context = canvas.getContext("2d");
 9     var memoryContext = memoryCanvas.getContext("2d");
10     var targetBitmap = memoryContext.createImageData(videoWidth, videoHeight);
11 
12 
13     /**
14      * @type {HTMLVideoElement}
15      */
16     var video;
17 
18     function loadVideo() {
19         video = document.createElement("video");
20         video.autoplay = true;
21         video.src = "12.mp4";
22     }
23 
24     function render() {
25 
26         // context.drawImage(video, 0, 0);
27 
28         memoryContext.drawImage(video, 0, 0);
29         var sourceImageData = memoryContext.getImageData(0, 0, videoWidth, videoHeight);
30 
31         for (var i = 0; i < sourceImageData.data.length; i += 4) {
32             var r = sourceImageData.data[i];
33             var g = sourceImageData.data[i + 1];
34             var b = sourceImageData.data[i + 2];
35 
36             var c = (r + g + b) / 3;
37 
38             targetBitmap.data[i] = c;
39             targetBitmap.data[i + 1] = c;
40             targetBitmap.data[i + 2] = c;
41             targetBitmap.data[i + 3] = 255;
42         }
43 
44         context.putImageData(targetBitmap, 0, 0);
45 
46         requestAnimationFrame(render);
47     }
48 
49     function init() {
50         loadVideo();
51         render();
52     }
53 
54     init();
55 })();