如何在 Firefox 上没有“通过用户交互”的情况下触发请求访问 HTML5 canvas 数据的权限请求？ （权限 API 中没有 canvas？）

Question

这是一个相当 firefox 的特定问题，它似乎......不确定 ofc，（但我在 chrome 中测试过，它可以工作，而我在 firefox 中得到乱码的 canvas 数据）

简而言之，我想动态地将表情符号插入到 favicon，引导我进行一段小旅程，将表情符号渲染到 canvas（动态），通过.toDataURL()读取 canvas，最后将 favicon href 设置为指向那个“网址”。 读取canvas数据时出现问题！

我在这里读到了https://bugzilla.mozilla.org/show_bug.cgi?id=1376865关于这个功能正在实现的东西，但他们似乎也提到了“画布权限”......他们不是指权限 API 对? （我看了这里https://w3c.github.io/permissions/#permission-registry ），没有这样的事情：（

我遇到了各种关于 canvas 被添加到权限 API 的互联网传闻，但我没有找到任何具体的东西......我要放弃这个吗？ 这是未来吗？

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

如果您将 go 转到http://www.faviconer.com/之类的页面，您可以在其中绘制您的图标，您会明白我的意思。 Firefox 显示“用户输入触发 canvas 数据访问”的弹出窗口，但铬似乎只允许它直接使用。

代码：

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);
});

Answer 1

好的，原来它是我的 CanvasBlocker 插件（即使我专门将我自己的域列入白名单？...在香草 FF 上测试并且它有效！）