JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<input type="file" id="inputFile">
<br><br>
 Sharpen: <input type=range id=mix min=0 max=100 value=20 onchange="update(this)">   
<br>
    <img id="img" /> 
<br>
<canvas id="canvas" width=379 height=100></canvas><br>
<br>canvas
<br>

CSS

#img {
    border: 1px solid green;
}

#canvas {
    border: 1px solid blue;
}

#canvas2 {
    border: 1px solid red;
}

JavaScript

var img = new Image();
var image2 = document.getElementById("img");
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    offScreen = document.createElement('canvas'),
    offctx = offScreen.getContext('2d');

var mix = 50;

/// as we need pixel access to apply convolution we
/// need to get around CORS:
img.crossOrigin = 'anonymous';

img.onload = imageLoaded;

$("#inputFile").on("change", function () {
    var inputFile = $("#inputFile")[0];
    var myFile = inputFile.files[0];

    var _URL = window.URL || window.webkitURL;

    img.src = _URL.createObjectURL(myFile);
});


/// sharpen image:
/// USAGE:
///    sharpen(context, width, height, mixFactor)
///  mixFactor: [0.0, 1.0]
/// sharpen image:
/// USAGE:
///    sharpen(context, width, height, mixFactor)
///  mixFactor: [0.0, 1.0]
function sharpen(cv, mix) {
    
    var ctx = cv.getContext("2d"),
        w = cv.width,
        h = cv.height;
    var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
        katet = Math.round(Math.sqrt(weights.length)),
        half = (katet * 0.5) | 0,
        dstData = ctx.createImageData(w, h),
        dstBuff = dstData.data,
        srcBuff = ctx.getImageData(0, 0, w, h).data,
        y = h;

    while (y--) {

        x = w;

        while (x--) {

            var sy = y,
                sx = x,
                dstOff = (y * w + x) * 4,
                r = 0,
                g = 0,
                b = 0,
                a = 0;

            for (var cy = 0; cy < katet; cy++) {
                for (var cx = 0; cx < katet; cx++) {

                    var scy = sy + cy - half;
                    var scx = sx + cx - half;

                    if (scy >= 0 && scy < h && scx >= 0 && scx < w) {

                        var srcOff = (scy * w + scx) * 4;
                        var wt = weights[cy * katet + cx];

                        r += srcBuff[srcOff] * wt;
                        g += srcBuff[srcOff + 1] * wt;
                        b +=...