Question

我不知道从哪里开始。我希望能够单击下载按钮（或链接）以将多个div的图像保存到单个压缩文件中。我已经阅读过关于canvas的内容，但是如果可能的话，我想用jQuery和类来做这个。

＆＃13;

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

＆＃13;

<div class="one">
test test test
</div>

<div class="two">
test test test
</div>

<a href="">Download</a>

＆＃13;

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)
})

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

1 个答案: