JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

threshold test.

<div id='canvas-container'></div>

Min: <input type='range' id='select-min' min='0' max='100' step='1' value='40'> 
<br>Max: <input type='range' id='select-max' min='0' max='100' step='1' value='60'>
<br>Blur: <input type='range' id='select-blur' min='0' max='50' step='1' value='5'>
<br>Blur: <input type='range' id='select-edge' min='0' max='50' step='1' value='5'>

<br>Image: <input type='number' id='select-image' min='1' max='7' value='1'>

JavaScript

const images = [
    "https://static.wikia.nocookie.net/classic-battlefield-modding/images/f/ff/Displacement1.jpg",
    "https://cdn.shopify.com/s/files/1/0272/4781/products/Washington-Elevation-Map-Detail1_750x.jpg",
    "https://cdn.shopify.com/s/files/1/0272/4781/products/Washington-Elevation-Map-Detail2_750x.jpg",
    // don't work if cors anonymous
    "https://www.mapzen.com/assets/images/tangram-heightmapper/great_lakes.jpg",
    "https://www.worldofleveldesign.com/categories/ue4/images/045-ue4-terrainparty-heightmaps-22.jpg",
    "https://i.pinimg.com/originals/a6/32/18/a63218837a95088c202fd8a4eb434a5e.jpg",
    "https://i.pinimg.com/originals/a6/32/18/a63218837a95088c202fd8a4eb434a5e.jpg"
];

class Demo {

    constructor(){
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = 500;
        this.canvas.height = 400;
        
        this.test();
    }

    test(){
        this.min = Number($("#select-min").val());
        this.max = Number($("#select-max").val());
        this.blur = Number($("#select-blur").val());
        let index = Number($("#select-image").val());
        
        let _this = this;
        this.img = new Image();
        this.img.crossOrigin = "Anonymous";
        this.img.onload = function(){
            console.log("loaded");
            _this.filterImage();
        }
        this.img.onerror = function(){
            console.log("error");
        }
        this.img.src = images[index - 1];
        console.log(this.img.src);
    }
    
    filterImage(){
        this.ctx.drawImage(this.img, 0, 0, 500, 400);
        let imageData = this.ctx.getImageData(0, 0, 500, 400);
        let multiplier = Math.round(255 / this.blur);
        
        // Iterate through every pixel
        for(let i = 0; i < imageData.data.length; i += 4){
            
            let r = imageData.data[i],
                val;
            
            if(r >= this.min && r <=...