将图片或者截图写入剪切板

最新推荐文章于 2023-05-30 16:37:37 发布

small_redhat

最新推荐文章于 2023-05-30 16:37:37 发布

阅读量362

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/samll_redhat/article/details/129931876

版权

该代码示例展示了如何利用fetch处理图片URL或截图文件流，通过URL.createObjectURL创建内存地址，并将图片写入剪贴板。注意，剪贴板功能需在HTTPS环境下运行。获取截图文件流的方法可参考其他相关文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  let url = URL.createObjectURL(file.fileBlod)
  // const imgURL = 'https://img2.baidu.com/it/u=695676904,3280053507&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=586';
  const data = await fetch(url);
  const blob = await data.blob();

  await navigator.clipboard.write([
          new ClipboardItem({
               [blob.type]: blob,
          }),
  ]);

以上是核心代码

如果有图片的地址，那么直接 fetch(url) 就行，如果是截图，那么获取到截图的文件流，就可以使用 URL.createObjectURL( ) 方法老获取图片的内存地址，然后fetch() 就可以了

注意：剪切板只有在https环境才可以使用，如果你是本地调试，启动的是http就会调不了！！！

获取截图的文件流可以看另一篇文章： js前端截图，dom元素截图_small_redhat的博客-优快云博客