zoukankan      html  css  js  c++  java
  • 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 })();
  • 相关阅读:
    JAVA(五)反射机制/Annotation
    JAVA(四)类集/枚举
    JAVA(三)JAVA常用类库/JAVA IO
    JAVA(二)异常/包及访问权限/多线程/泛型
    JAVA(一)JAVA基础/面向对象基础/高级面向对象
    【Android】Android输入子系统
    【Linux】深入理解Linux中内存管理
    【XMPP】基于XMPP的即时通讯解决方案
    cf593d
    cf593c
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5947310.html
Copyright © 2011-2022 走看看