拾色器 window.EyeDropper is not a constructor

我们在自定义调色盘的时候可能需要使用到取色器

<i class="iconfont icon-sip-line" @click="drawHandler"></i>

async drawHandler(e) {
    if (!window.EyeDropper){
        this.$message.warning('暂不支持')
        return false
    }
    const val =  e ? e.target.value : null
    if (val) {
        return false
    } else {
        this.$message.warning('按Esc可退出')
        const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象
        try {
            const result = await eyeDropper.open() // 开始拾取颜色
            this.valueChange(null, result.sRGBHex)
        } catch (e) {
            return false
        }
    }
},

但是我们有时候会遇到明明我在本地测试的是可以正常使用的，但是上了测试站点却发现在控制台打印window.EyeDropper却是undefined。

这是因为这个api仅在一些支持的浏览器的安全上下文（HTTPS）中可用。也就是说即使浏览器兼容也只有https协议的页面可以使用。