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

Question

在 Angular 7 应用程序中，我们使用 html-to-image to render an HTML block into a png, we save that image using file-saver。

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

这很好用，但业务要求是将该图像放入剪贴板，以便可以将其粘贴到另一个工具（Word，Excel...）。

已经对 Async Clipboard API 进行了一些谷歌搜索，但似乎 API 尚未得到所有浏览器的支持。

是否有任何解决方法可以在不依赖剪贴板的情况下工作 API？

Answer 1

你最好的选择确实是异步剪贴板 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);
}

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

Angular/Typescript copying an image(blob) to clipboard programmatically

clipboard

blob

image

typescript

angular