如图根据背景/身体/头等模块图层批量合并生成图片并下载:
演示效果Demo
MFK-NFT生成工具
主要代码部分一键生成下载
// 图片上传成功回调
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()
})
},