使用navigator剪贴板从画布blob中存储图像/png

Question

我尝试将canvas blob存储到navigator剪贴板

graphicDiv.addEventListener(
'click',
(event) => {
const canvas = <HTMLCanvasElement> document.getElementById('canvas');
canvas.toBlob((blob) => {
if (blob) {
let data = [new ClipboardItem({ [blob.type]: blob })];
navigator.clipboard.write(data).then(
function () {},
function (err) {}
);
}
});
},
false
);

似乎有些不对劲，因为TS给了我以下错误

Argument of type '{ [x: string]: Blob; }' is not assignable to parameter of type 'Record<string, ClipboardItemData>'.
'string' index signatures are incompatible.
Type 'Blob' is missing the following properties from type 'Promise<ClipboardItemDataType>

error TS2339: Property 'write' does not exist on type 'Clipboard'.
102            let data = [new ClipboardItem({ [blob.type]: blob })];
~~~~~

有谁熟悉如何存储画布chartjs把图表放到剪贴板上?

Answer 1

https://www.w3.org/TR/clipboard-apis/#typedefdef-clipboarditemdata6.4.2. 写入剪贴板

这些数据类型必须放在剪贴板上，并带有相应的原生类型描述(如果在复制和期间添加到datattransfer对象)减少事件。

text/plain
text/uri-list
text/csv
text/html
image/svg+xml
application/xml, text/xml
application/json