【electron】复制粘贴图片 && 拖拽文件

需求：

对话详情页 图片 类信息，单机右键弹出的操作栏中增加【复制】功能，复制后将该内容以图片形式保存在本地剪切板中，可直接粘贴到PC端输入栏中或文字内容编辑区（例如微信，飞书等其他IM会话软件内容输入区）

1. 复制比较简单，代码：

	/***
    @params
	copyImgDom = {
	  src: img.image_elem_large_url,
	  width: img.image_elem_large_pic_width,
	  height: img.image_elem_large_pic_height
	}
	***/
    handleCopyImg(copyImgDom){
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();

      canvas.width = copyImgDom.width;
      canvas.height = copyImgDom.height;
      img.crossOrigin = "Anonymous";
      img.src = copyImgDom.src;

      img.onload = () => {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(async blob => {
          const data = [
            new ClipboardItem({
              [blob.type]: blob,
            }),
          ];

          await navigator.clipboard.write(data).then(
            () => {
              this.$message({
                text: '复制图片'
              })
            },
            () => {
              console.error("Unable to write to clipboard.");
            });
          });
      }
    },

2. 粘贴图片
粘贴图片有一个问题就是 从粘贴板获取到的File对象中没有 path 也就是文件路径， 需要我们自己保存下来获取到路径才能发送，腾讯IM的Electron SDK 目前只能这么操作。

2.1 粘贴

    async onPaste (e) {
      let _this = this
      e.preventDefault();
      let text = '';
      // let imgUrlList = [];
      text = e.clipboardData.getData('text')
      if (text) {
        this.insert(text);
      }
      let files = []
      let promiseList = []
      for(var i = 0; i < e.clipboardData.files.length; i++) {
        let file = e.clipboardData.files[i];
        if (file && i != 'length') {
          let fileSrc = ''
          let fileType = 'file'
          let blob = e.clipboardData.items[i].getAsFile();
          let j = i
          while(!blob) {
            j++
            blob = e.clipboardData.items[j].getAsFile()
          }
          if (/\.(png|jpg|jpeg|gif|svg)(\?.*)?$/.test(file.name)) {
            // 图片 获取一下缩略图
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            fileType = 'image'
            let promise = new Promise((resolve,reject)=>{
              reader.onload = function (e) {  
                fileSrc = e.target.result;
                files.push({
                  name: file.name,
                  type: fileType,
                  src: fileSrc,
                  file: blob
                })
                resolve()
              }
            })
            promiseList.push(promise)
            
          } else {
            files.push({
              name: file.name,
              type: fileType,
              src: fileSrc,
              file: blob
            })
          }
          
        }
      }
      if (promiseList.length > 0) {
        Promise.all(promiseList).then(()=>{
          _this.$emit('pasteFile', files)
        })
      }
    },

2.2 发送时候 发现没有PATH 发送不了 调用Electron controller 保存到本地 拿到本地路径

// 从微信输入框复制的图片是没有这个路径的 发送不了 需要保存在本地获取到一个路径
      let filePath = ''
      if (!file.file.path) {
        filePath = await this.$ipcInvoke(ipcApiRoute.downloadFileToFolder, { name: file.name,
          src: file.src})
      }

  // 其中Buffer 这样取  const { Buffer } = require("node:buffer");
  downloadFileToFolder (file) {
    let base64Src = file.src.slice(file.src.indexOf(',') + 1)
    const _fileBuffer = Buffer.from(base64Src, 'base64');
    const filePath = path.join(electronApp.getAppPath(), '/temp', `${file.name.replace('image', getUUID())}`);
    let folderName = path.join(electronApp.getAppPath(), '/temp')
    if (!fs.existsSync(folderName)) {
      fs.mkdir(folderName, ()=>{});
    }
    fs.writeFile(filePath, _fileBuffer, err => console.log(err, Date.now()));
    return filePath
  }

3. 拖拽文件 这个 简单 先拖拽拿到文件以后和粘贴的动作一样

    initDrag () {
      let dropTarget = this.$refs['conversationBody'] // 拖拽主题只负责进入  然后显示拖拽框
      let dropTargetHover = this.$refs['conversationBodyHover']  // 拖拽框负责接收文件和离开事件
      // 拖拽事件绑定
      dropTarget.addEventListener("dragenter", this.handleDropTargetEvent);
      dropTargetHover.addEventListener("dragover", this.handleDropTargetEvent);
      dropTargetHover.addEventListener("drop", this.handleDropTargetEvent);
      dropTargetHover.addEventListener("dragleave", this.handleDropTargetEvent);
    },
    handleDropTargetEvent(event) {
      // 阻止事件的默认行为
      event.preventDefault();
      if (event.type === 'drop') {
        // 文件进入并松开鼠标,文件边框恢复正常
        // this.dragHoverShow = false
        let files = []
        let promiseList = []
        for(let file of event.dataTransfer.files) {
          if (file) {
            let fileSrc = ''
            let fileType = 'file'
            if (/\.(png|jpg|jpeg|gif|svg)(\?.*)?$/.test(file.name)) {
              // 图片 获取一下缩略图
              let reader = new FileReader();
              reader.readAsDataURL(file);
              fileType = 'image'
              let promise = new Promise((resolve,reject)=>{
                reader.onload = function (e) {  
                  fileSrc = e.target.result;
                  files.push({
                    name: file.name,
                    type: fileType,
                    src: fileSrc,
                    file: file
                  })
                  resolve()
                }
              })
              promiseList.push(promise)
              
            } else {
              files.push({
                name: file.name,
                type: fileType,
                src: fileSrc,
                file: file
              })
            }
            
          }
        }
        // 有图片
        if (promiseList.length > 0) {
          Promise.all(promiseList).then(()=>{
            this.dragHoverShow = false
            this.pasteFile(files)
          })
        } else {
          this.dragHoverShow = false
          this.pasteFile(files)
        }
      } else if (event.type === 'dragleave') {
        // 离开
        console.log('dragleave',event.type)
        this.dragHoverShow = false
      } else {
        // 进入
        console.log('进入',event.type)
        this.dragHoverShow = true
      }
    },

效果图：