When I use EyeDropper API throw error 'EyeDropper' is not defined

Question

I need to use EyeDropper to complete a eyedropper. My project use Vue2 + Ts, my code:

<div
  v-if="haveEyeDropper"
  @click="handleClickPick"
>
  <i class="iconfont icon-xiguan"></i>
</div>

handleClickPick(): void {
  const eyeDropper = new EyeDropper();
  // ...
}

I receive Errors "Cannot find name 'EyeDropper'. Did you mean 'eyeDropper'? -Vetur" and "'EyeDropper' is not defined -eslint" But I copy MDN-document(https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) example code in a index.html, it works.

(My Browser is Chrome edition 105.0.5195.52)

Answer 1

Can you check is your application running on Secure Context? (Most likely within local development)

window.isSecureContext

If it is not running in secure context you can not access EyeDropper API (according to MDN):

If thats the case; you may choose to access your application over HTTPS by using ngnix etc.

Answer 2

I came up with a feasible plan, but it is not very standard.

I added the following code to index.html:

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

I check window.EyeDropper, if have it, I mount new EyeDropper() example on window.

Then I can use it in business code:

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

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

Answer 3

My leader gave me a standard method with the folloing code：

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

Vetur reports the error because: Esline unrecognized window new Api.

Answer 4

You need to declare that variable/type on Window. Like any new variable (not default) on the "window" object.

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

Check this thread: https://stackoverflow.com/a/12709880/4978626