Javascript 在Microsoft Edge中使用画布上下文调整图像的亮度_Javascript_Html5 Canvas_Webrtc_Microsoft Edge

Javascript 在Microsoft Edge中使用画布上下文调整图像的亮度

javascript html5-canvas webrtc

Javascript 在Microsoft Edge中使用画布上下文调整图像的亮度,javascript,html5-canvas,webrtc,microsoft-edge,Javascript,Html5 Canvas,Webrtc,Microsoft Edge,我正在构建一个应用程序，在这个应用程序中，我需要能够从网络摄像头捕获一个帧抓取并将其上传到应用程序。为此，我使用WebRTC从视频流中捕获图像，将其写入画布，然后获取数据并上传。这在很大程度上是可行的。然而，我需要给用户一种调整亮度的方法。为了实现这一点，我在页面上添加了一个带有视频流的滑块，该滑块在调整时应用style.webkitFilter='brightnessX%'。同样，这工作正常，但没有调整捕获图像的亮度，只是调整显示的视频流。我用于实际捕获图像的javascript函数是： fu

我正在构建一个应用程序，在这个应用程序中，我需要能够从网络摄像头捕获一个帧抓取并将其上传到应用程序。为此，我使用WebRTC从视频流中捕获图像，将其写入画布，然后获取数据并上传。这在很大程度上是可行的。然而，我需要给用户一种调整亮度的方法。为了实现这一点，我在页面上添加了一个带有视频流的滑块，该滑块在调整时应用style.webkitFilter='brightnessX%'。同样，这工作正常，但没有调整捕获图像的亮度，只是调整显示的视频流。我用于实际捕获图像的javascript函数是：

function takepicture() {

    var context = canvas.getContext('2d');
    var b = document.getElementById('txtBrightness').value;
    if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.filter = 'brightness(' + b + '%)';
        context.drawImage(video, 0, 0, width, height);

        var data = canvas.toDataURL();
        //photo.setAttribute('src', data);

        //alert(data);
        document.getElementById('Image').value = data;
        //$("#Image").val(data);

        $("#form1").submit();
    } else {
        clearphoto();
    }
}

这适用于Chrome、Firefox和基于Chrome的Edge版本，但在Edge的EdgeHTML版本中不起作用。在这些版本的Edge中，视频流以调整后的亮度正确显示，但捕获的图像未调整亮度。是否有解决办法使上下文筛选器与Edge browser的EdgeHTML版本一起工作？

从中，CanvasRenderingContext2D.filter似乎不支持Microsoft Edge browser EdgeHTML版本

作为一种解决方法，您可以尝试使用Konva插件对图像应用过滤器

示例代码如下：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://unpkg.com/konva@4.1.3/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Brighten Image Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }

        #slider {
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <input id="slider" type="range" min="-1" max="1" step="0.05" value="0" />
    <script>
        function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function () {
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }
        function buildStage(images) {
            var stage = new Konva.Stage({
                container: 'container',
                width: window.innerWidth,
                height: window.innerHeight
            });

            var layer = new Konva.Layer();

            var lion = new Konva.Image({
                image: images.lion,
                x: 80,
                y: 30,
                draggable: true
            });

            lion.cache();
            lion.filters([Konva.Filters.Brighten]);
            layer.add(lion);
            stage.add(layer);
            var slider = document.getElementById('slider');
            slider.oninput = function () {
                lion.brightness(slider.value);
                layer.batchDraw();
            };
        }

        var sources = {
            lion: '/images/lion.png'
        };

        loadImages(sources, buildStage);
    </script>
</body>

输出如下所示：