JavaScript 前端实现图片复制功能的完整指南

在近期的前端开发工作中，我们遇到了一个具体需求：用户期望能够通过点击按钮直接复制图片，从而便捷地将图片分享至班级群等社交场景。

那么，如何借助 JavaScript 来达成这一目标呢？

一、前置知识：如何实现复制？

为了实现图片复制，我们需要先了解前端实现文本或媒体复制的基本原理。

目前，实现复制功能主要有两种技术路线：

• 使用 document.execCommand() 方法；
• Clipboard API；

需要注意的是，复制功能受到浏览器安全策略的限制：复制脚本必须放置在用户交互事件（如点击事件）的回调函数中执行，由用户主动触发。如果脚本直接自动执行，浏览器通常会抛出错误。

接下来，我们将分别介绍这两种具体方法。

1.1 document.execCommand()

具体使用方法如下：

首先选中目标文本，然后调用 document.execCommand('copy')，即可将选中的文本内容复制到系统剪贴板。

const input = document.getElementById("input");
input.select(); // 注意 input 框不能添加 disabled 属性，否则会影响 select() 方法
document.execCommand("copy");

此外，该 API 还可以实现 剪切 和 粘贴 功能。

• 调用 document.execCommand('cut')：将选中的文本剪切到剪贴板。
• 调用 document.execCommand('paste')：将剪贴板中的文本粘贴到当前光标位置。

剪切功能的操作流程与复制类似，此处不再赘述。这里主要演示粘贴功能。

使用粘贴功能时存在以下限制：

• 确保目标元素处于可编辑状态，例如 input、textarea 元素，或者 contenteditable 属性设置为 true 的元素。
• 确保目标元素获得焦点，可以使用 focus() 方法将焦点聚焦到该元素上。

const target = document.getElementById('pasteTargetInput');
target.focus(); // 确保目标元素获得焦点
document.execCommand('paste'); // 尝试粘贴

然而，现代浏览器如 (Chrome、Firefox、Edge) 已经限制或废弃了直接调用 execCommand("paste") 的功能，因此不再推荐继续使用此 API。

最后总结一下，document.execCommand() 是实现复制的一种传统方式，其优缺点如下：

• 优点：在低版本浏览器中兼容性较好，
• 缺点：

• 已被 web 标准 正式弃用，官方不推荐使用。
• 仅支持复制文本内容，无法直接复制图片或二进制数据。
• 只能将当前选中的内容写入剪贴板，无法直接写入自定义的非选中内容。
• 该操作是同步执行的，如果复制的内容体积过大，可能会导致页面出现卡顿现象。

1.2 Clipboard API

在浏览器的BOM对象中，有一个API叫clipboard，它提供了系统剪贴板的读写访问能力，可以实现剪切、复制和粘贴功能，我们可以通过window上的navigator对象直接访问到一个clipboard对象。

console.log(navigator.clipboard);

该 clipboard 对象提供了四个核心方法：

• read()：从剪贴板读取数据，该方法会返回一个 Promise，并将读取到的数据封装成一个 ClipboardItem 对象返回。
• readText()：从剪贴板中读取 文本 数据，该方法会返回一个 Promise 对象，并将剪贴板中的文本数据作为 String 类型回传。
• write()：用于写入数据（即 ClipboardItem对象）到剪贴板，该方法会返回一个 Promise。当该 Promise 成功 resolve 时，意味着写入操作已完成。
• writeText()：用于写入 文本 到剪贴板，该方法会返回一个 Promise。当该 Promise 成功 resolve 时，意味着写入操作已完成。

基于上述描述，我们可以利用 write() 和 writeText() 方法来实现复制功能。由于 writeText() 仅支持写入文本，而 write() 方法允许写入任意类型的数据，因此我们需要使用 write() 方法来实现图片复制功能。

二、实现复制图片

通常情况下，图片主要通过两种形式进行加载：

• 远程 URL，最常见的形式是 cdn 地址，例如 https://cdn.xxx.cn/example.png。
• base64 URL，一些体积较小的图片通常会被打包成 base64 字符串，以减少网站对服务器资源的请求次数，例如 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...。

无论图片以何种形式存在，我们的最终目标都是将其转化为 blob 对象，然后通过 navigator.clipboard.write() 方法写入到剪贴板中。

假设我们有这样一张图片：

<img src="https://xxx" alt="加载失败" id="img"/>

我们可以利用 canvas 将图片复制到剪贴板，具体实现代码如下：

function copyImage(img) {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)
  canvas.toBlob((blob) => {
    // 目前图片只支持 png 类型
    const clipboardItem = new ClipboardItem({ 'image/png': blob })
    navigator.clipboard.write([clipboardItem])
  })
}
img.addEventListener("click", () => {
  copyImage(img);
});

如果在执行过程中出现 Uncaught SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement' 报错，这通常是因为图片存在跨域问题。首先需确保图片资源服务器允许跨域访问，其次需要在 img 标签上增加 crossOrigin 属性。

<img src="xxx" crossOrigin/>

在实际业务场景中，提供的可能只是一个图片点击后的跳转链接，我们需要先将该链接转换为二维码图片，然后再进行复制操作。

这里我们借助第三方库 qrcode，将链接转换为二维码。

import QRcode from 'qrcode';

async function copyImage(url) {
  // 转成 base64 的 url
   const url = await QRcode.toDataURL(link, {
      errorCorrectionLevel: 'H', // 纠错级别最高
      width: 128,
      margin: 2,
      scale: 1,
    });
    const blob = await (await fetch(url)).blob();
    const clipboardItem = new ClipboardItem({ 'image/png': blob })
    navigator.clipboard.write([clipboardItem])
}

我们通过 QRcode.toDataURL() 方法，获取二维码的 base64 格式图片 URL，然后利用原生的 fetch 方法，将二维码图片转化为 blob 对象，最后以 ClipboardItem 的形式写入到 clipboard 中。

除了使用 fetch 以外，还可以通过以下方式将 base64 格式的图片转化为 blob 对象，具体代码如下：

function dataURIToBlob(dataURI) {
    const base64Index = dataURI.indexOf(';base64,') + 8;
    const base64 = dataURI.substring(base64Index);
    const byteCharacters = atob(base64);
    const byteArrays = [];

    for (let i = 0; i < byteCharacters.length; i++) {
      byteArrays.push(byteCharacters.charCodeAt(i));
    }

    const byteArray = new Uint8Array(byteArrays);
    const blob = new Blob([byteArray], { type: 'image/png' });
    return blob;
}

三、clipboard 兼容性问题

在某些旧版浏览器中可能不支持 Clipboard API，因此需要通过判断 navigator.clipboard 的值是否为 undefined 来确定当前浏览器是否支持复制功能。如果不支持 Clipboard API，则无法直接复制图片，此时可以使用 document.execCommand('copy') 来复制文本内容，或者直接向用户提示该浏览器不支持图片复制功能。

 // 将dataBase64复制到剪切板
function copyToClipboard(text) {
  let a = document.createElement('input');
  a.value = text;
  document.body.appendChild(a);
  a.select();
  document.execCommand('copy');
  a.remove();
}

function copyImage() {
  if (navigator.clipboard) {
     //...
      const clipboardItem = new ClipboardItem({ 'image/png': imgBlob });
      navigator.clipboard.write([clipboardItem]);
      console.log('复制成功');
  } else {
    copyToClipboard(img.src);
  }
}

四、其它功能

4.1 预览图片

预览图片主要依赖于 URL.createObjectURL 这个原生 API，具体代码如下：

function previewImage(img) {
  const url = URL.createObjectURL(blob);
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}

4.2 下载图片

下载图片主要依赖于 a 标签的 download 属性，具体代码如下：

function downloadImage(img) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = true;
  a.click();
  URL.revokeObjectURL(url);
  console.log('下载图片成功');
}

五、小结

本文主要介绍了前端如何实现 复制图片 的功能，核心是通过 Clipboard API 来实现的。如遇到浏览器兼容性问题，可以考虑回退使用 document.execCommand() 进行低版本兼容。另外，还介绍了 预览图片 和 下载图片 的实现思路，希望能对大家有所帮助。

以上就是 JavaScript 实现复制图片功能的方法示例的详细内容，更多关于 JavaScript 复制图片功能的资料请关注本站其它相关文章！