复制图片到粘贴板

如何将下载地址链接图片复制到粘贴板

/**
 * url 为download地址 将下载地址处理成DataURL 供image使用
 * @param {*} url
 */
export async function copy_jpg(url, callback) {
  let options = {
    method: "GET",
    credentials: "include",
  };
  const data = await fetch(url, options);
  const blob = await data.blob();
  let fileReader = new FileReader();
  fileReader.readAsDataURL(blob);
  fileReader.onload = async function (event) {
    let txt = event.target.result;
    getcanvas(txt, (cb) => {
      callback(cb);
    });
  };
}
/**
 * 传入图片url即可 绘制canvas
 * @param {*} url
 */
async function getcanvas(url, callback) {
  let canvas = document.createElement("canvas");
  let image = new Image();
  image.setAttribute("crossOrigin", "Anonymous"); //可能会有跨越问题
  image.src = url;
  image.onload = async () => {
    canvas.width = image.width; //设置画板宽度
    canvas.height = image.height; //设置画板高度
    canvas.getContext("2d").drawImage(image, 0, 0); //加载img到画板
    let url1 = canvas.toDataURL("image/png"); // 转换图片为dataURL，格式为png
    clipboardImg(url1, (cb) => {
      callback(cb);
    });
  };
}
/**
 * 从url下载并复制图片，如果是png格式的图片直接调用此方法就能复制成功
 * @param {*} url
 */
async function clipboardImg(url, cb) {
  try {
    const data = await fetch(url);
    const blob = await data.blob();
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    cb("success");
  } catch (err) {
    cb("fail");
  }
}

如果是正常的 http 图片地址链接 可直接调用getcanvas。 chrome浏览器 navigator.clipboard.write 仅支持png格式，固采先绘制canvas 转成DataURL地址。

然后Safari 使用gg。catch一下发现:

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Safari 是不允许 在异步函数中写入 new ClipboardItem()

兼容Safari版本 同理：如果是正常的 http 图片地址链接可省略 FileReader 步骤

export async function copySafari(url, params = null, callback) {
    const data = new ClipboardItem({
      "image/png": getImageBlob(url,params)
        .then((data) => {
          return data;
        })
        .catch((error) => {
          callback("fail");
        }),
    });
    console.log("复制图片的数据", data);
    await navigator.clipboard.write([data]);
    callback("success");
  }
 
 function getImageBlob(url, params) {
   return new Promise(async (resolve, reject) => {
     let fetchUrl = url;
     if (!url && params?.filePath) {
       fetchUrl = await params.device.getDownloadUrl(params.filePath, true);
     }
     let options = {
       method: "GET",
       credentials: "include",
     };
     const data = await fetch(fetchUrl, options);
     const blob = await data.blob();
     let fileReader = new FileReader();
     fileReader.readAsDataURL(blob);
     fileReader.onload = async function (event) {
       let txt = event.target.result;
       let canvas = document.createElement("canvas");
       let image = new Image();
       image.setAttribute("crossOrigin", "Anonymous"); //可能会有跨越问题
       image.src = txt;
       image.onload = async () => {
         canvas.width = image.width; //设置画板宽度
         canvas.height = image.height; //设置画板高度
         canvas.getContext("2d").drawImage(image, 0, 0); //加载img到画板
         try {
           canvas.toBlob(
             async (blob) => {
               resolve(blob);
             },
             "image/png",
             1
           );
         } catch (err) {
           reject("fail");
         }
       };
     };
   });
 }