使用navigator.clipboard复制图片到剪切板

将图片地址转成base64

toBase64(imgUrl) {
      new Promise((resove) => {
        // 一定要设置为let，不然图片不显示
        const image = new Image();
        // 解决跨域问题
        image.setAttribute("crossOrigin", "anonymous");
        const imageUrl = imgUrl;
        image.src = imageUrl;
        // image.onload为异步加载
        image.onload = () => {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var quality = 0.8;
          // 这里的dataurl就是base64类型
          // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
          const dataurl = canvas.toDataURL("image/jpeg", quality);
          const base64Data = dataurl.split("base64,")[1];
          resove(base64Data);
        };
      });
    },

将base64转成Blob

convertBase64ToBlob(base64, type) {
      console.log(base64);
      var bytes = window.atob(base64);
      var ab = new ArrayBuffer(bytes.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], {
        type: type,
      });
    },

复制

copyFn(image) {
      let base64Data = this.toBase64(image);
      console.log(base64Data);
      const blobInput = this.convertBase64ToBlob(base64Data, "image/png");
      const clipboardItemInput = new ClipboardItem({
        "image/png": blobInput,
      });

      if (navigator.clipboard) {
        navigator.clipboard.write([clipboardItemInput]);
      }
    },