Angular / Typescript以编程方式将图像(斑点)复制到剪贴板

时间:2019-11-22 16:05:47

标签: angular typescript image blob clipboard

在Angular 7应用程序中,我们使用html-to-image将HTML块呈现为png,我们使用file-saver保存该图像。

    htmlToImage.toBlob(element).then(function (blob) {
      saveAs(blob, `image.png`);
    });

这很好,但是业务需求是将图像放入剪贴板,以便可以将其粘贴到其他工具(Word,Excel ...)中。

已经对Async Clipboard API进行了一些谷歌搜索,但是似乎所有浏览器都尚未支持该API。

在不依赖剪贴板API的情况下,是否有任何变通办法可以起作用?

1 个答案:

答案 0 :(得分:0)

您最好的选择确实是Async Clipboard API,它现在对浏览器的支持正在增长。 article的示例精确显示了如何使用它:

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
}