electron中操作ftp服务的同名jpg和svg图片合并并且删除svg图片

　　

class BufferWritable extends Writable {

  constructor() {

    super({ objectMode: false })

    this.data = Buffer.alloc(0)

  }

  _write(chunk, encoding, callback) {

    this.data = Buffer.concat([this.data, chunk])

    callback()

  }

  _final(callback) {

    callback()

  }

  getBuffer() {

    return this.data

  }

}

// 将svg 或者 jpg 转成 base64  
  getBase64:async ({ state},config) => {
    let ftpConfig = JSON.parse(localStorage.getItem('ftpConfig'))
    let type = config.type
    let remoteFilePath = config.remoteFilePath
    const client = new ftp.Client()
    client.ftp.verbose = true // 可选：启用详细日志记录 
    try {
      await client.access({
        host: ftpConfig.host,
        port: ftpConfig.port,
        user: ftpConfig.user,
        password: ftpConfig.password,
        secure: false // 根据你的 FTP 服务器是否使用 SSL/TLS 来设置
      })   
      const writable = new BufferWritable()
      await client.downloadTo(writable, remoteFilePath) 
      const imageData = writable.getBuffer()
      if(type === 'svg'){ 
        return `data:image/svg+xml;base64,${imageData.toString("base64")}`
      } 
      return `data:image/jpeg;base64,${imageData.toString("base64")}`
    } catch (err) {
      console.error(err)
      throw err
    } finally {
      client.close()
    }
  },
  // 通过文件地址生成 img1 img2 和 canvas
  generateImages:async({ state,dispatch},config) => { 
    let imgName = config.imgName
    let imgTime = config.imgTime
    let imgSrc1 = await dispatch('getBase64',{ type:'jpg',remoteFilePath:`/3/${imgTime}/${imgName}.jpg` })
    let image1 = document.createElement('img')
    image1.src = imgSrc1 

    let imgSrc2 = await dispatch('getBase64',{ type:'svg',remoteFilePath:`/3/${imgTime}/${imgName}.svg` })
    let image2 = document.createElement('img')
    image2.src = imgSrc2 

 
    let canvas = document.createElement('canvas')  
    canvas.width = 800
    canvas.height = 600
    let ctx = canvas.getContext('2d') 
    image1.onload = drawImages()
    image2.onload = drawImages()
    let lock = false 
    function drawImages() { 
      if (image1.complete && image2.complete) { 
        if(lock){ 
          return
        }
        !lock && (lock = true) 
        ctx.clearRect(0, 0, canvas.width, canvas.height) 
        ctx.drawImage(image1, 0, 0, canvas.width, canvas.height)
        ctx.drawImage(image2, 0, 0, canvas.width, canvas.height) 
        downloadCanvasAsJPG()   
      } else {  
        setTimeout(drawImages, 100)
      }
    }
    async function downloadCanvasAsJPG() {  
      // 将 canvas 内容转换为 Blob 对象 
      canvas.toBlob((blob) => {
        const reader = new FileReader() 
        reader.onloadend = () => {
          const arrayBuffer = reader.result   
          const buffer = Buffer.from(new Uint8Array(arrayBuffer))
          const readStream = new Readable({
            read() { 
              this.push(buffer)
              this.push(null) // 表示没有更多的数据要读取
            }
          })
          uploadToRemote(readStream) 
          image1 = null
          image2 = null 
          canvas = null
        } 
        reader.readAsArrayBuffer(blob)
      }, 'image/jpeg', 0.6) // 1.0 是质量因子 
    
    }
    async function uploadToRemote(fileContent){ 
      let ftpConfig = JSON.parse(localStorage.getItem('ftpConfig')) 
      let remoteFilePath = `/3/${imgTime}/${imgName}.jpg` 
      let remoteFilePath2 = `/3/${imgTime}/${imgName}.svg` 
      const client = new ftp.Client()
      client.ftp.verbose = true // 可选：启用详细日志记录 
      try {
        await client.access({
          host: ftpConfig.host,
          port: ftpConfig.port,
          user: ftpConfig.user,
          password: ftpConfig.password,
          secure: false // 根据你的 FTP 服务器是否使用 SSL/TLS 来设置
        })     
        await client.uploadFrom(fileContent, remoteFilePath)
        await client.remove(remoteFilePath2) 
      } catch (err) {
        console.error(err)
        throw err
      } finally {
        client.close()
      }
    } 
  },