javascript - Chrome 76 使用导航器将内容复制到剪贴板

Question

我刚刚更新到 chrome 76 稳定版，并尝试使用新的剪贴板 API 将一些文本(以及后来的图像)复制到剪贴板。但是，navigator.clipboard.write(data) 似乎不起作用。这是我的代码:

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var data = new Blob(["Text data"], {type : "text/plain"});
            navigator.clipboard.write(data).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}, 3000);

我在 chrome 扩展内容脚本中运行它，设置了剪贴板权限，因此权限确实得到了授予。抛出的错误是:

无法写入剪贴板。错误:

TypeError: Failed to execute 'write' on 'Clipboard': Iterator getter is not callable.

奇怪的是，当我使用 navigator.clipboard.write text(text) 而不是 navigator.clipboard.write(data) 时，一切正常。问题是，我想使用 write(data) 因为稍后我也想将图像写入剪贴板。任何想法为什么它不起作用？谢谢。

编辑:我从规范表中得到代码 https://w3c.github.io/clipboard-apis/#dom-clipboard-write

更新:好的，我使用 ClipboardItem 进行了文本复制(请参阅下面的回答)，但如果我对 dataURL 编码图像执行相同操作，整个网页会崩溃并显示“Aw snap”消息。所以不确定那里发生了什么。以下是会使站点崩溃并强制重新加载的代码:

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            //var blob = new Blob(['hello'], {type: 'text/plain'});
            var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

            var item = new ClipboardItem({'image/png': data});
            navigator.clipboard.write([item]).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}, 3000);

Answer 1

好的，这是适合我的解决方案。在调用 write() 之前，您必须将 blob 包装在 ClipboardItem 对象中。我通过阅读 https://bugs.chromium.org/p/chromium/issues/detail?id=150835 偶然发现了解决方案然后在网络上搜索“ClipboardItem”，然后找到此代码 https://github.com/web-platform-tests/wpt/blob/master/clipboard-apis/async-navigator-clipboard-basics.https.html .似乎还没有这方面的真正文档，但是，嘿，它有效!

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var blob = new Blob(['hello'], {type: 'text/plain'});
            var item = new ClipboardItem({'text/plain': blob});
            navigator.clipboard.write([item]).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permission not granted: " + result);
        }
    });
}, 3000);

更新:好的，我也让图像复制工作(查看相同的来源)。 url 是图片的 url (duh)

async function copyImage(url) {
    console.log("Wriing to clipbard");  

    const response = await fetch(url);
    const blob = await response.blob();

    const item = new ClipboardItem({'image/png': blob});
    await navigator.clipboard.write([item]).then(function() {
      console.log("Copied to clipboard successfully!");
    }, function(error) {
      console.error("unable to write to clipboard. Error:");
      console.log(error);
    });
}