实现复制图片到剪切板

1,244 阅读1分钟

1. 首先将图片链接地址通过canvas转为Base64的格式

// 通过canvas将图片转换为base64
convertImgToBase64(url, callback, outputFormat){
  var canvas = document.createElement('CANVAS'),
  ctx = canvas.getContext('2d'),
  img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL(outputFormat || 'image/png');
    callback.call(this, dataURL);
    canvas = null; 
  };
  img.src = url;
 }

2. 通过navigator.clipboard来实现复制功能

// 复制方法
copy(row, index) {
  console.log('object', row, index);
  // 图片需支持跨域请求访问
  let url = '图片链接地址'
  this.convertImgToBase64(url, async (base64Img) => {
    const data = await fetch(base64Img);
    const blob = await data.blob();
    if (navigator.clipboard == undefined) {
      // 注:此方法只能在localhost跟https协议下可用,http协议下不存在此方法
      this.$message.error("请在https协议下操作");
    } else {
      this.$message({
        message: "复制成功",
        type: "success",
      });
    }
    await navigator.clipboard.write([
      // eslint-disable-next-line no-undef
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  })
}

参考链接

# js 把图片url转化成base64

# 如何将html生成图片并复制到剪切板