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 })();