Сделай так чтобы вместо <img id="original" src="Оригинал.png" width="300" height="300" alt="my"/>  был canvas , в который загружалось фото с ПК по нажатия на кнопку "загрузить":
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HeatMap</title>
    <style>
        body {
            font-family: sans-serif;
            font-weight: lighter;
        }

        div.wrapper {
            width: 80%;
            margin: 0 auto;
        }

        canvas {
            border: 1px solid green;
        }

        button{
            width: 10%;
            height: 10%;
            margin: 2%;

        }

        #min{
           padding-left: 1%;
        }

        #max{
            padding-left: 1.5%;
        }


        #wrapper-legend{
            padding-left: 10%;
        }

        .heatmap-legend {
            display: inline-block;
            list-style: none;
            margin-left: 5%;
            padding: 0;
        }

        .heatmap-legend-item {
            /*display: inline-block;*/
            width: 60px;
            height: 20px;
            background-color: #000000;
        }

        .sign {
            float: left;  /*Выравнивание по правому краю */
            border: 1px solid #333; /* Параметры рамки */
            padding: 7px; /* Поля внутри блока */
            margin: 10px 0 5px 5px; /* Отступы вокруг */
            background: #f0f0f0; /* Цвет фона */
        }
        .sign figcaption {
            margin: 0 auto 5px; /* Отступы вокруг абзаца */
        }

        ul {
            list-style: none;
        }

        label {
            display: block;
        }

        input {
            margin-bottom: 2vh;
        }

        input[type='range'] {
            width: 200px;
        }
    </style>
</head>
<body>

<figure class="sign">
    <p><img id="original" src="Оригинал.png" width="300" height="300" alt="my"/></p>
    <figcaption>Оригинал</figcaption>
</figure>

<figure class="sign">
    <p><img id="photoshop" src="Photoshop.png" width="300" height="300" alt="ph"/></p>
    <figcaption>Photoshop</figcaption>
</figure>


<figure class="sign">
    <p><canvas id="canvas-g" width="300px" height="300px" ></canvas></p>
    <figcaption>Преобразование Хаара</figcaption>

</figure>


<figure class="sign">
    <p><canvas id="canvas-hm" width="300px" height="300px" ></canvas></p>
    <figcaption>Heat map</figcaption>

</figure>



<br><button id="button">Get heat map</button>
<div id="wrapper-legend" style="width: 100% ">
    <p1 id="min">Наименьшая разница</p1>
    <br>
    <ol class="heatmap-legend" >
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
        <li class="heatmap-legend-item"></li>
    </ol>
    <br>
    <p id="max" style="display: inline-block">Наибольшая разница</p>
</div>

</body>

<script>
    const canvas_g = document.getElementById("canvas-g");
    const ctx_g = canvas_g.getContext("2d");

    const button = document.getElementById("button");

    const originalImg = document.getElementById("original");
    const photoshopImg = document.getElementById("photoshop");

    const canvas_hm = document.getElementById("canvas-hm");
    const ctx_2 = canvas_hm.getContext("2d");

    button.addEventListener("click", () => {
        buildHeatMap();
    })

    let originalImgBitMap;
    let photoshopImgBitMap;
    const origImg = new Image(300, 300)
    const photoshImg = new Image(300, 300)


    origImg.src = "Оригинал.png";
    photoshImg.src = "Photoshop.png";

    origImg.onload = () => {
        createImageBitmap(originalImg, {resizeWidth: 300, resizeHeight: 300})
            .then(result => {
                ctx_2.drawImage(result, 0, 0, 300, 300);
                originalImgBitMap = ctx_2.getImageData(0, 0, 300, 300);
                ctx_2.clearRect(0, 0, 300, 300);
            });
    }

    photoshImg.onload = () => {
        createImageBitmap(photoshImg, {resizeWidth: 300, resizeHeight: 300})
            .then(result => {
                ctx_g.drawImage(result, 0, 0, 300, 300);
                photoshopImgBitMap = ctx_g.getImageData(0, 0, 300, 300);
                //ctx_g.clearRect(0, 0, 300, 300);
            });
    }

    const differences = [];
    function buildHeatMap() {
        //TODO получить обесцвеч. изобр. Вставить.
        const origImg = getImage(originalImgBitMap);
        const photoshImg = getImage(photoshopImgBitMap);

        //const differences = [];
        const heatMap = [];

        let min = 255, max = -1;
        for (let i = 0; i < 300; i++) {
            heatMap.push([]);
            for (let j = 0; j < 300; j++) {
                //Суммы разности по каналам R G B.
                const diff
                    = Math.abs(origImg[i][j].r - photoshImg[i][j].r)
                    + Math.abs(origImg[i][j].g - photoshImg[i][j].g)
                    + Math.abs(origImg[i][j].b - photoshImg[i][j].b);

                min = diff < min ? diff : min; //Нашли минимум
                max = diff > max ? diff : max; //Нашли максимум
                differences.push(diff)
                heatMap[i].push(0);
            }
        }

        for (let i = 0; i < 300; i++)
            for (let j = 0; j < 300; j++) {
                const c = differences[i * 300 + j] / max;
                heatMap[i][j] = {
                    r: 255 * c,
                    g: 255 * (1 - c),
                    b: 0,
                    a: 255
                }
            }

        ctx_2.putImageData(new ImageData(toImageData(heatMap), 300, 300), 0, 0);
    }

    function getImage(image) {
        const imgData = [];
        const data = image.data.slice(0)
        for (let i = 0; i < image.height; i++) {
            imgData.push([]);
            for (let j = 0; j < image.width * 4; j += 4) {
                const pixel = i * image.width * 4 + j;
                imgData[i].push({
                    r: data[pixel],
                    g: data[pixel + 1],
                    b: data[pixel + 2],
                    a: data[pixel + 3]
                });
            }
        }
        return imgData;
    }

    function toImageData(data) {
        const rows = data.length;
        const columns = data[0].length;
        const image = new Uint8ClampedArray(4 * rows * columns);
        for (let i = 0; i < rows; i++) {
            for (let j = 0; j < columns; j++) {
                image.set([data[i][j].r, data[i][j].g, data[i][j].b, data[i][j].a], i * columns * 4 + j * 4)
            }
        }
        return image;
    }

    const maxDifferenceColor = [255, 0, 0];
    const minDifferenceColor = [0, 255, 0];


    //Для вывода легенды о тепловой карте
    const legendList = document.querySelector('.heatmap-legend');
    const children = legendList.children;

    let i = 0;
    for (const child of children) {
        const [r, g, b] = getlegendColor(i / children.length);
        child.style.background = `rgba(${r}, ${g}, ${b}, 255)`;
        //child.innerHTML+=i+2;
        i++;
    }

    function getlegendColor(differenceCoefficient) {
        if (differenceCoefficient >= 1) return [...maxDifferenceColor];
        if (differenceCoefficient <= 0) return [...minDifferenceColor];

        const r = (maxDifferenceColor[0] - minDifferenceColor[0]) * differenceCoefficient + minDifferenceColor[0];
        const g = (maxDifferenceColor[1] - minDifferenceColor[1]) * differenceCoefficient + minDifferenceColor[1];
        const b = (maxDifferenceColor[2] - minDifferenceColor[2]) * differenceCoefficient + minDifferenceColor[2];

        return [r, g, b];
    }
</script>
</html>