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

编程问答 2022-05-21

问题描述

这似乎是一个相当特定于 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 上测试过并且有效！）

canvasdynamicdynamicdynamicfaviconfaviconjavascriptpermissionspermissions