前端工具批量生成NFT图片头像并下载

如图根据背景/身体/头等模块图层批量合并生成图片并下载:

演示效果Demo

MFK-NFT生成工具​​​​​​​

 

 

主要代码部分一键生成下载 

扫描二维码关注公众号，回复： 15191075 查看本文章

  // 图片上传成功回调
    handleAvatarSuccess (res) {
      var that = this
      if (res.res.status === 200) {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
      if (that.imgindex === 0) {
        for (var i in that.imageList) {
          if (that.imageList[i].name === '背景') {
            that.bgList.push({
              url: res.url,
              name: that.imageList[i].name,
              width: that.imageList[i].width,
              height: that.imageList[i].height,
              top: that.imageList[i].top,
              bottom: that.imageList[i].bottom,
              left: that.imageList[i].left,
              right: that.imageList[i].right
            })
          }
        }
        that.allList = that.bgList
      } else if (that.imgindex === 1) {
        for (var j in that.imageList) {
          if (that.imageList[j].name === '身体') {
            that.body.push({
              url: res.url,
              name: that.imageList[j].name,
              width: that.imageList[j].width,
              height: that.imageList[j].height,
              top: that.imageList[j].top,
              bottom: that.imageList[j].bottom,
              left: that.imageList[j].left,
              right: that.imageList[j].right
            })
          }
        }
        that.allList = that.body
      } else if (that.imgindex === 2) {
        for (var k in that.imageList) {
          if (that.imageList[k].name === '头部') {
            that.head.push({
              url: res.url,
              name: that.imageList[k].name,
              width: that.imageList[k].width,
              height: that.imageList[k].height,
              top: that.imageList[k].top,
              bottom: that.imageList[k].bottom,
              left: that.imageList[k].left,
              right: that.imageList[k].right
            })
          }
        }
        that.allList = that.head
      } else if (that.imgindex === 3) {
        for (var h in that.imageList) {
          if (that.imageList[h].name === '脸部') {
            that.mause.push({
              url: res.url,
              name: that.imageList[h].name,
              width: that.imageList[h].width,
              height: that.imageList[h].height,
              top: that.imageList[h].top,
              bottom: that.imageList[h].bottom,
              left: that.imageList[h].left,
              right: that.imageList[h].right
            })
          }
        }
        that.allList = that.mause
      }

      // if (res) this.imageUrl = res.url
    },
    filesToRar (arrImages, filename) {
      const _this = this
      const zip = new JSZip()
      const cache = {}
      const promises = []
      _this.title = '正在加载压缩文件'
      for (let i = 0; i < arrImages.length; i++) {
        console.info('pppppp', arrImages[i])
        console.info('ppppp', i)
        const promise = _this.getImgArrayBuffer(arrImages[i].url).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(i + '.png', data, { binary: true }) // 逐个添加文件
          cache[i] = data
        })
        promises.push(promise)
      }
      Promise.all(promises)
        .then(() => {
          zip.generateAsync({ type: 'blob' }).then((content) => {
            _this.title = '正在压缩'
            // 生成二进制流
            FileSaver.saveAs(content, filename) // 利用file-saver保存文件 自定义文件名
            _this.title = '压缩完成'
          })
        })
        .catch((res) => {
          _this.$message.error('文件压缩失败')
        })
    },
    getdown () {
      if (this.posterImgList.length > 0) {
        this.filesToRar(this.posterImgList, 'ZHAORF')
      } else {
        this.$message({
          type: 'error',
          message: '请生成图片在下载'
        })
      }
    },
    async fnUploadRequest (options) {
      try {
        const file = options.file // 拿到 file
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'))
        const date = new Date().getTime()
        const fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
        // 上传文件,这里是上传到OSS的 uploads文件夹下
        client.put('uploads/' + fileNames, file).then(res => {
          if (res.res.statusCode === 200) {
            options.onSuccess(res)
          } else {
            options.onError('上传失败')
          }
        })
      } catch (e) {
        options.onError('上传失败')
      }
    },
    getImgArrayBuffer (url) {
      return new Promise((resolve, reject) => {
        // 通过请求获取文件blob格式
        const xmlhttp = new XMLHttpRequest()
        xmlhttp.open('GET', url, true)
        xmlhttp.responseType = 'blob'
        xmlhttp.onload = function () {
          if (this.status === 200) {
            resolve(this.response)
          } else {
            reject(this.status)
          }
        }
        xmlhttp.send()
      })
    },