如何使用JavaScript将URL指向的图片复制到剪贴板？

数据老陈

2026-8-27

修复方案

你的代码跑不通基本是踩了这几个高频坑：

MIME类型配置错误：标准JPEG格式的MIME标识是image/jpeg，不存在image/jpg这个标准值；另外不管图片是JPG还是PNG，都不要硬编码MIME类型，直接用接口返回的Blob自带的type字段即可。还有你漏了给navigator.clipboard.write加await，这个方法是异步Promise，不加await不仅执行时序不对，报错也没法被正常捕获。
跨域拦截：fetch第三方域名的图片时，对方服务器必须返回匹配当前站点的Access-Control-Allow-Origin响应头，不然浏览器会直接拦截请求，你拿不到合法的图片二进制数据。
调用环境不合法：剪贴板API只能在安全上下文里跑，也就是正式环境必须是HTTPS，本地调试只能用localhost；而且这个方法不能页面一加载就自动调用，必须绑在用户主动触发的事件（比如点击按钮）回调里，不然浏览器会直接拦截剪贴板写入权限。

可直接运行的修正代码

// 记得把这个方法放在用户主动交互的事件回调里触发，比如按钮点击事件
async function copyNetImageToClipboard(imageUrl) {
  try {
    const response = await fetch(imageUrl, { mode: 'cors' });
    if (!response.ok) throw new Error(`图片请求失败，状态码：${response.status}`);
    const imageBlob = await response.blob();
    await navigator.clipboard.write([
      new ClipboardItem({
        [imageBlob.type]: imageBlob
      })
    ]);
    // 这里可以加复制成功的自定义提示逻辑
    console.log('图片复制成功');
  } catch (err) {
    console.error('复制失败：', err);
  }
}