navigator.clipboard复制文字和图片的问题

最近要实现一个"将图片和文字复制到剪切板"的功能。接下来是我的实现的过程,在这个过程中踩到一些坑,记录一下。

将文字复制到剪切板

将一段文字复制到剪切板是很容易的一件事,W3C给我们提供了一些API。

  1. navigator.clipboard.writeText()     可以直接使用navigator.clipboard.writeText()来将一段文字复制到剪切板。
ts 复制代码
const copyText = (
    text: string,
): Promise<string> => {
    return new Promise((resolve, reject) => {
        // 剪切板API
        const clipBoardApi = navigator.clipboard;
        if (clipBoardApi) {
            clipBoardApi.writeText(text)
            .then(() => resolve('复制成功'))
            .catch(reject);
        } else {
            reject('浏览器不支持navigator.clipboard方法');
        }
    });
}
  1. navigator.clipboard.write()     对于navigator.clipboard.writeText()来说,看到writeText就知道这个API明显只能够复制文字,和我们要实现的功能不太相符,所以我就使用了navigator.clipboard.write()方法。
ts 复制代码
const copyText = (
    text: string,
): Promise<string> => {
    return new Promise((resolve, reject) => {
        // 剪切板API
        const clipBoardApi = navigator.clipboard;
        if (clipBoardApi) {
            const clipboardItemText = new Blob([text], {type: 'text/plain'});
            const clipboardItem = new ClipboardItem({
                'text/plain': clipboardItemText,
            })
            clipBoardApi.write([clipboardItem])
            .then(() => resolve('复制成功'))
            .catch(reject);
        } else {
            reject('浏览器不支持navigator.clipboard方法');
        }
    })
}

将图片复制到剪切板

更具上述使用navigator.clipboard.write()方法将文字复制到剪切板后,我们将代码改造一下就可以将图片复制到剪切板。

ts 复制代码
const copyImage = (
    url: string,
): Promise<string> => {
    return new Promise(async (resolve, reject) => {
        // 剪切板API
        const clipBoardApi = navigator.clipboard;
        if (clipBoardApi) {
            const image = await fetch(url).then((response) => response.blob());
            const clipboardItemImage = new Blob([image], {type: 'image/png'});
            const clipboardItem = new ClipboardItem({
                'image/png': clipboardItemImage,
            })
            clipBoardApi.write([clipboardItem])
            .then(() => resolve('复制成功'))
            .catch(reject);
        } else {
            reject('浏览器不支持navigator.clipboard方法');
        }
    })
}

将文字和图片复制

复制文字和图片到剪切板的代码都实现了,那么我们应该怎么样将其整合起来,将文字和图片一同复制到剪切板呢?看到ClipboardItem事例的参数是要求传递一个对象的时候,就大致有了思路,我们将文字和图片一起传入试一试。

ts 复制代码
const copyImageText = (
  url: string,
  text: string,
): Promise<string> => {
  return new Promise(async (resolve, reject) => {
      // 剪切板API
      const clipBoardApi = navigator.clipboard;
      if (clipBoardApi) {
          // 图片
          const image = await fetch(url).then((response) => response.blob());
          const clipboardItemImage = new Blob([image], {type: 'image/png'});
          // 文字
          const clipboardItemText = new Blob([text], {type: 'text/plain'});
          const clipboardItem = new ClipboardItem({
              'image/png': clipboardItemImage,
              'text/plain': clipboardItemText,
          })
          clipBoardApi.write([clipboardItem])
          .then(() => resolve('复制成功'))
          .catch(reject);
      } else {
          reject('浏览器不支持navigator.clipboard方法');
      }
  })
}

但是上述代码测试下来发现只复制了文字,并没有复制图片。那么我们可以换种思路,navigator.clipboard.write()方法的参数传递是一个数组。

ts 复制代码
const copyImageText2 = (
    url: string,
    text: string,
): Promise<string> => {
    return new Promise(async (resolve, reject) => {
        // 剪切板API
        const clipBoardApi = navigator.clipboard;
        if (clipBoardApi) {
            // 图片
            const image = await fetch(url).then((response) => response.blob());
            const clipboardItemImage = new Blob([image], {type: 'image/png'});
            // 文字
            const clipboardItemText = new Blob([text], {type: 'text/plain'});
            const handleClipboardItem = (key: string, value: Blob) => new ClipboardItem({
                [key]: value,
            })
            clipBoardApi.write([
                handleClipboardItem('image/png', clipboardItemImage),
                handleClipboardItem('text/plain', clipboardItemText),
            ])
            .then(() => resolve('复制成功'))
            .catch(reject);
        } else {
            reject('浏览器不支持navigator.clipboard方法');
        }
    })
}

经过测试下来,发现报错了。

Uncaught (in promise) DOMException: Support for multiple ClipboardItems is not implemented.

查询文档中...

查找了相关的文档后,我发现无法在单次操作中同时复制多种类型的数据(例如文本和图片)到剪贴板。

最后实现方案

最后的实现方案就是将文字和图片都转成文字复制到剪切板,例如:123<img src=""/>,然后复制到编译器后在编译器里进行处理,将<img src="" />转换成对应的图片,因为处理的过程是基于ckEditor编译器的,过于复杂,所以具体过程就不放出来了。

总结

以上的代码和总结仅是本人的灼见,希望各位大佬们多批评。

相关推荐
zwjapple15 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞5 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作