【浏览器】复制图片到剪贴板

最新推荐文章于 2025-02-04 16:14:13 发布

cjsnyxz

最新推荐文章于 2025-02-04 16:14:13 发布

阅读量532

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/cjsnyxz/article/details/143162738

版权

在 Web 开发中，用户体验的提升往往离不开一些细微的交互细节。比如，能够将图片直接复制到剪贴板而不需要用户手动下载和上传，这无疑能大大提升用户的使用体验。本文将通过一段代码来展示如何在浏览器中实现这个功能，尤其是在需要处理不同图片格式的情况下。

实现步骤

1. 获取图片 Blob 对象

首先，我们需要通过图片的 URL 来获取图片的 Blob 对象。这一步的关键在于使用 fetch 方法请求图片资源：

const response = await fetch(imageUrl);
const blob = await response.blob();

2. 处理 PNG 格式

在浏览器中，使用 ClipboardItem 将图片复制到剪贴板时，目前只支持 image/png 格式的图片。因此，如果图片已经是 PNG 格式，我们可以直接复制：

if (blob.type === 'image/png') {
  clipboardImage(blob);
  return;
}

3. 转换其他格式为 PNG

对于非 PNG 格式的图片，我们需要先将其转换为 PNG 格式。为此，我们可以利用 HTML5 的 canvas 元素：

创建一个 Image 对象并加载图片。
当图片加载完成后，将其绘制到 canvas 上。
使用 canvas.toBlob 方法将 canvas 的内容转换为 PNG 格式的 Blob。

const img = new Image();
const url = URL.createObjectURL(blob);
img.src = url;

img.onload = async () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('无法获取Canvas上下文');
  }

  ctx.drawImage(img, 0, 0);

  canvas.toBlob(async canvasBlob => {
    if (!canvasBlob) {
      throw new Error('无法将Canvas内容转换为Blob');
    }

    clipboardImage(canvasBlob);

    URL.revokeObjectURL(url);
  }, 'image/png');
};

在加载图片失败的情况下，我们也需要处理错误并给用户提示：

img.onerror = () => {
  URL.revokeObjectURL(url);
  ElMessage({
    message: '加载图像失败',
    type: 'error',
  });
};

4. 将图片复制到剪贴板

最后一步是将转换后的 PNG 图片复制到剪贴板。我们使用 ClipboardItem 和 navigator.clipboard.write 来实现：

async function clipboardImage(imageBlob: Blob) {
  try {
    if (!imageBlob) return;
    const clipboardItem = new ClipboardItem({ 'image/png': imageBlob });

    await navigator.clipboard.write([clipboardItem]);

    ElMessage({
      message: '照片已复制到剪贴板',
      type: 'success',
    });
  } catch (error) {
    console.error('复制照片失败:', error);
    ElMessage({
      message: '复制照片失败',
      type: 'error',
    });
  }
}