如何在 Firefox 上不通过“通过用户交互”触发访问 HTML5 画布数据的权限请求？ 权限 API 中没有画布？

如何解决如何在 Firefox 上不通过“通过用户交互”触发访问 HTML5 画布数据的权限请求？ 权限 API 中没有画布？

这似乎是一个相当特定于 Firefox 的问题……不确定 ofc！ （但我在 chrome 中测试过，它可以工作，而我在 Firefox 中得到了乱码的画布数据）

简而言之，我想动态地将表情符号插入到收藏夹图标，引导我通过将表情符号渲染到画布（动态）、通过 .toDataURL() 阅读画布，最后设置收藏夹图标 href指向那个“网址”。读取canvas数据时出现问题！

我在 https://bugzilla.mozilla.org/show_bug.cgi?id=1376865 处阅读了有关正在实施的此功能的内容，但他们似乎还提到了“画布权限”……他们不是指权限 API，对吗？ （我在这里看了https://w3c.github.io/permissions/#permission-registry），但没有这样的东西:(

我遇到了各种关于将画布添加到权限 API 的互联网传闻，但我还没有找到任何具体的东西...我要放弃这个吗？以后会这样吗？

我的页面上没有“用户输入”，因此回想起来只是为了触发请求许可的弹出窗口而添加此内容似乎...... hacky！

如果您访问类似 http://www.faviconer.com/ 的页面，您可以在其中绘制您的收藏夹图标，您就会明白我的意思。 Firefox 显示了一个关于“用户输入触发画布数据访问”的弹出窗口，但铬似乎完全允许它。

代码：

const createIconElement = () => {
    var link = document.createElement('link');
    link.rel = 'icon';
    link.type = 'image/png';
    return link;
};

// original: https://github.com/EvanHahn/canvas-to-favicon/blob/master/canvas-to-favicon.js
const canvasToFavicon = (canvas) => {
    let head = document.head;

    var existingIcons = document.querySelectorAll('link[rel="icon"]');
    for (var i = 0,len = existingIcons.length; i < len; i++) {
        head.removeChild(existingIcons[i]);
    }

    iconElement = createIconElement();
    head.appendChild(iconElement);

    iconElement.href = canvas.toDataURL('image/png');
}

document.addEventListener("DOMContentLoaded",() => {
    console.log('running setFavicon.js');

    // get an emoji from the DOM somewhere
    // const emojicontainingstring = document.querySelectorAll('*');
    // const emojis = emojicontainingstring.map(extractEmoji).filter(e => !!e);
    // const emoji = emojis[0];

    const emoji = '?';

    // render emoji to canvas
    const canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = 32;

    const ctx = canvas.getContext("2d");
    ctx.font = '26px serif'
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(emoji,canvas.width / 2,canvas.height / 2)

    canvasToFavicon(canvas);
});

解决方法

好吧，原来它是我的 CanvasBlocker 插件（即使我特意将自己的域列入白名单？...在​​ vanilla FF 上测试过并且有效！）