当我使用 EyeDropper API 时抛出错误“EyeDropper”未定义

Answer 1

您能否检查您的应用程序是否在安全上下文上运行？ （最有可能在本地开发中）

window.isSecureContext

如果未在安全环境中运行，您将无法访问 EyeDropper API（根据 MDN）：

如果是这样的话；您可以选择使用 ngnix 等通过 HTTPS 访问您的应用程序。

Answer 2

我想出了一个可行的方案，但不是很标准。

我将以下代码添加到index.html：

<script>
  if (!!window.EyeDropper) {
    window.EyeDropperTarget = new EyeDropper();
  }
</script>

我检查window.EyeDropper，如果有的话，我将

new EyeDropper()

示例安装在

window

上。

然后我就可以在业务代码中使用它了：

handleClickPick(): void {
  const picker = window.EyeDropperTarget;

  picker.open().then((result: any) => {
    const color = result?.sRGBHex;
    // ...
  });
}

Answer 3

我的领导给了我一个标准方法，代码如下：

new example = (window as any).EyeDropper()

Vetur 报错的原因是：Esline 无法识别窗口新 Api。

Answer 4

您需要在 Window 上声明该变量/类型。 就像“窗口”对象上的任何新变量（非默认变量）一样。

declare global {
    interface Window {
        EyeDropper?: any;
    }
}

检查此线程：https://stackoverflow.com/a/12709880/4978626

Answer 5

尝试：

const eyeDropper = new window.EyeDropper();

注意：如果您是 ubuntu 用户，那么您可能会收到：“AbortError：无法在‘EyeDropper’上执行‘打开’：用户取消了选择。”错误，但不用担心此代码/EyeDropper将适用于 Windows chrome/edge 版本 >= 95。

检查这个：https://blog.greenroots.info/how-to-create-an-eyedropper-tool-using-javascript