根据图片 url 实现图片/文案复制到剪贴板

0实现思路

1. 采用 h5 新增 API navigator.clipboard.write 来写入剪贴板；
2. 本 api 涉及权限较大，所以部署只允许是 https 才可使用，当然本地环境可以调；
3. 简单的复制文字：

navigator.clipboard.writeText('Linr Text to be copied')

4. 复制图片：赋值图片目前仅支持 png 类型，所以其他类型的图片需要转为 png 类型，本文章仅仅实现 jpg 文件转为 png。使用 fetch 获取文件的 blob 流（如果服务器不支持 fetch 获取图片，请运维配置下 nginx）：

location ^~ / {
    root html;
    index index.html index.htm;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}

5. 如果是 png 则直接复制，如果不是则转为 png；
6. 写入剪贴板 navigator.clipboard.write；
7. 完整代码如下。

1完整代码如下

convertToPng = imgBlob => {
  const imageUrl = window.URL.createObjectURL(imgBlob);
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const imageEl = createImage({ src: imageUrl });
  imageEl.onload = e => {
    canvas.width = e.target.width;
    canvas.height = e.target.height;
    ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
    canvas.toBlob(copyToClipboard, "image/png", 1);
  };
};

createImage = options => {
  options = options || {};
  const img = Image ? new Image() : document.createElement("img");
  if (options.src) {
    img.src = options.src;
  }
  return img;
};
// 文本
createTextBlob = text => {
  return new Blob([text], { type: "text/plain" });
};

copyToClipboard = pngBlob => {
  console.log(pngBlob);
  // const textBlob = createTextBlob("大家好222");
  try {
    navigator.clipboard.write([
      new ClipboardItem({
        [pngBlob.type]: pngBlob,
        // [textBlob.type]: textBlob
      })
    ]);
    console.log("Image copied");
  } catch (error) {
    console.error(error);
  }
};
// 复制图片
copyImg(
  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg"
);