javascript - onclick 将多个 div 作为图像保存到一个 zip 文件中

Question

我不确定从哪里开始。我希望能够单击下载按钮(或链接)以将多个 div 的图像保存到一个压缩文件中。我已经阅读了有关 Canvas 的内容，但如果可能的话，我想使用 jQuery 和一个类来完成此操作。

.one {
padding: 50px;
background: tomato;
margin: 10px;
color: white;
}

.two {
padding: 50px;
background: navy;
margin: 10px;
color: white;
}

<div class="one">
test test test
</div>

<div class="two">
test test test
</div>

<a href="">Download</a>

Answer 1

您需要一个服务器来处理请求，您可以选择任何您想要的服务器(node、php、asp 等)。然后该服务器将处理接收图像列表，然后创建一个 zip 文件以供下载。

示例 nodejs 服务器(未测试):

const express = require('express')
const path = require('path')
const fs = require('fs')
const admzip = require('adm-zip')
const app = express()

app.post('/download', (req, res) => {
  let zip = new admzip()
  let files = JSON.parse(req.body)
  files.forEach(file => { 
    let p = path.join(__dirname, 'path/to/images', path.parse(file).base)
    zip.addFile(p, fs.readFileSync(path).toString())
  })
  res.download(zip.toBuffer())
})

app.listen(8080)

要将这些文件发送到服务器，您将获得一个图像列表，然后使用 ajax(例如 fetch)发送它们。

示例客户端:

let images = []
Array.from(document.querySelectorAll('img'))
    .forEach(img => images.push(img.src))

fetch('/download', {
    method: 'post',
    body: JSON.stringify(images)
})