使用导航器剪贴板从画布 blob 中存储图像/png答案

【问题标题】：use navigator clipboard to store image/png from canvas blob使用导航器剪贴板从画布 blob 中存储图像/png
【发布时间】：2021-11-20 06:31:52
【问题描述】：

我试图将画布 blob 存储到导航器剪贴板中

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

有没有高手知道如何将 canvas chartjs 图表存储到剪贴板中？

【问题讨论】：

标签： javascript html typescript chart.js angular12

【解决方案1】：

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

这些数据类型必须放在剪贴板上，并带有相应的如果在复制期间添加到 DataTransfer 对象，则本机类型描述和剪辑事件。

 text/plain

 text/uri-list

 text/csv

 text/html

 image/svg+xml

 application/xml, text/xml

 application/json

【讨论】：

你能扩展with a corresponding native type description并提供一个例子吗？