image-filter

by EMIR MARQUES

HTML

<canvas id="src" width="1305" height="569"></canvas>
<canvas id="dest" width="1305" height="569"></canvas>

CSS

canvas {
  border: solid red 2px;
}

JavaScript

var ctx = document.getElementById('src').getContext("2d");
    var img = new Image();
		img.crossOrigin = "anonymous";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.width = img.width;
        ctx.height = img.height;
        var output = medianFilter(ctx, 8);
        
        var ctx2 = document.getElementById('dest').getContext("2d");
        var imageData = new ImageData(output, img.width, img.height);
        ctx2.putImageData(imageData, 0, 0);
    };

    img.src = 'https://www.tenforums.com/attachments/browsers-email/232258d1556685556t-poor-rendering-google-maps-satellite-view-all-browsers-poor-rendering-google-maps.jpg';


    function median(numbers) {
        var median = 0,
            numsLen = numbers.length;
        numbers.sort();

        if (
            numsLen % 2 === 0
        ) {
            median = (numbers[numsLen / 2 - 1] + numbers[numsLen / 2]) / 2;
        } else {
            median = numbers[(numsLen - 1) / 2];
        }

        return median;
    }

    const medianFilter = (image, radius) => {
        let width = image.width;
        let height = image.height;
        var input = image.getImageData(0, 0, image.width, image.height).data;
        var output = input;
        for (var x = 0; x < width; x++) {
            for (var y = 0; y < height; y++) {
                var index = (x + y * width) * 4;
                var bufferRed = [];
                var bufferGreen = [];
                var bufferYellow = [];
                var bufferAlpha = [];
                for (var cx = 0; cx < radius; cx++) {
                    for (var cy = 0; cy < radius; cy++) {
                        if (x + cx < width && y + cy < height) {
                            var idx = (x + cx + (y + cy) * width) * 4;
                            bufferRed.push(input[idx]);
                            bufferGreen.push(input[idx + 1]);
                            bufferYellow.push(input[idx + 2]);
                           ...