Detect Icon in image

by musicreader

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Marker Adjustment</title>
    <style>
        #output {
            max-width: 100%;
            max-height: 100vh;
            position: relative;
        }
        .marker {
            position: absolute;
            border: 2px solid red;
            pointer-events: none;
        }
        canvas {
            display: none;
        }
    </style>
</head>
<body>
    <input type="file" accept="image/*" onchange="loadFile(event)">
    <img id="output" src="" alt="Selected Image" onclick="markLocation(event)">
    <canvas id="canvas"></canvas>
    <script>
        var loadFile = function(event) {
            var output = document.getElementById('output');
            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
                URL.revokeObjectURL(output.src);
                prepareCanvas(output);
            }
        };

        function prepareCanvas(image) {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        }

        function markLocation(event) {
            const initialMarkerSize = 30;
            const img = document.getElementById('output');
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            // Calculate the clicked position relative to the image
            const rect = img.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // Scale coordinates for image size vs displayed size
            const scaleX = img.naturalWidth / img.width;
            const scaleY = img.naturalHeight / img.height;
            let markerSize = initialMarkerSize;
            let...