Eyedropper API 在本地主机上工作正常，但在我将其上传到服务器时无法正常工作

Question

我正在制作一个图像颜色选择器，我使用了 Eyedropper API。它在本地主机上似乎工作正常，但我不知道当我将它上传到服务器时它有什么问题。

if (!window.EyeDropper) {
            alert("Your browser does not support Image Color Picker feature");
        }

        const eyeDropper = new EyeDropper();
        const pickerBtn = document.querySelector(".open-picker");
        const toast = document.getElementById('toast');
        const result = document.querySelector(".color_code_field");

        function showToast(message) {
            toast.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff"
            class="toast_icon">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        ${message}
        `;
            toast.classList.remove('hide');
            setTimeout(() => {
                toast.classList.add('hide');
            }, 3000);
        }

        imgInput.addEventListener("change", function() {
            const file = this.files[0];
            if (!file) return;

            const reader = new FileReader();

            reader.addEventListener("load", function() {
                imgPreview.src = this.result;
            });

            reader.readAsDataURL(file);
        });

        pickerBtn.addEventListener("click", function() {
            eyeDropper
                .open()
                .then((res) => {
                    result.value = `${res.sRGBHex}`;
                })
                .catch((err) => {
                    console.log("User canceled the selection.");
                });
        });

当我运行它时，它在控制台中给我错误

Uncaught ReferenceError: EyeDropper is not defined