在 Firefox 上，如何在没有 "via user interaction" 的情况下触发请求访问 HTML5 canvas 数据的权限？（权限 API 中没有 canvas？）

Question

这似乎是一个相当特定于 Firefox 的问题……不确定！（但我在 chrome 中进行了测试并且它有效，而我在 firefox 中得到乱码 canvas 数据）

简而言之，我想在网站图标中动态插入表情符号，引导我通过将表情符号呈现为 canvas（动态），阅读 canvas 通过 .toDataURL()，最后将 favicon href 设置为指向那个“url”。读取canvas数据时出现问题！

我在这里读过东西 https://bugzilla.mozilla.org/show_bug.cgi?id=1376865 about this feature being implemented, but they also seem to mention "canvas permissions"... they're not referring to the Permissions API right? (i looked here https://w3c.github.io/permissions/#permission-registry), 没有这样的东西:(

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

我的页面上没有“用户输入”，所以回想起来添加这个只是为了触发请求许可的弹出窗口似乎......很笨拙！

如果您转到 http://www.faviconer.com/ 这样的页面，您可以在其中绘制您的网站图标，您就会明白我的意思。 Firefox 显示一个关于“用户输入触发 canvas 数据访问”的弹出窗口，但 Chromium 似乎完全允许它。

代码：

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 插件（即使我专门将我自己的域列入白名单？......在 vanilla FF 上测试并且有效！）

在 Firefox 上，如何在没有 "via user interaction" 的情况下触发请求访问 HTML5 canvas 数据的权限？（权限 API 中没有 canvas？）

How do I trigger ask for permission to access HTML5 canvas data without "via user interaction" on Firefox? (no canvas in Permissions API?)

javascript

permissions

favicon

canvas

dynamic

在 Firefox 上，如何在没有 "via user interaction" 的情况下触发请求访问 HTML5 canvas 数据的权限？ （权限 API 中没有 canvas？）

How do I trigger ask for permission to access HTML5 canvas data without "via user interaction" on Firefox? (no canvas in Permissions API?)

javascript

permissions

favicon

canvas

dynamic

在 Firefox 上，如何在没有 "via user interaction" 的情况下触发请求访问 HTML5 canvas 数据的权限？（权限 API 中没有 canvas？）