Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142410

Adjusting the brightness of an image using canvas context in Microsoft Edge

$
0
0

I am building an application where I need to be able to capture a frame-grab from a web camera and upload it to the application. To do this, I am using WebRTC to capture the image from the video stream, write it to a canvas, and then grab the data and upload it. This works fine for the most part. However, I needed to give the user a way to adjust the brightness. To accomplish this, I added a slider to the page with the video stream on it, that applies "style.webkitFilter = 'brightness(X%)'" when adjusted. Again, this works fine, but did not adjust the brightness of the captured image, just the displayed video stream. The javascript function I use to actually capture the image is:

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

This works in Chrome, Firefox, and the Chromium based version of Edge, however, it does NOT work in the EdgeHTML versions of Edge. In those versions of Edge, the video stream is correctly displayed with the adjusted brightness, but the captured image does not have the brightness adjusted. Is there a workaround to make context filters work with the EdgeHTML versions of the Edge browser?


Viewing all articles
Browse latest Browse all 142410

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>