html5 截图+打包+下载

最新推荐文章于 2022-10-05 19:10:43 发布

会加速的蜗牛

最新推荐文章于 2022-10-05 19:10:43 发布

阅读量353

点赞数

分类专栏： html2canvas jszip fileSaver 文章标签： html5

本文链接：https://blog.csdn.net/qq_23244029/article/details/124382703

版权

html2canvas 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

jszip

1 篇文章 0 订阅

订阅专栏

fileSaver

1 篇文章 0 订阅

订阅专栏

最近项目中遇到页面上需要大量下载二维码的情况，而二维码又是含有其他页面元素定做的有独特的页面效果。于是想到先将定制二维码转成图片，再将多张图片通过打包再一次性下载~废话不多说，上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list {
        display: flex;
        flex-direction: column;
      }
      .item {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <script src="./html2canvas.min.js"></script>
    <script src="./jszip.min.js"></script>
    <script src="./FileSaver.min.js"></script>
    <script>
      const imgs = []
      const jszip = new JSZip()
      window.onload = () => {
        // 获取图片地址
        getImgs()
        // console.log('imgs', imgs)
      }

      function getImgs() {
        // 获取所有需要截图的dom元素
        const items = document.querySelectorAll('.item')
        // 因为Html2canvas渲染是异步完成的，所以需要通过promise.all确认所有截图都完成
        const promises = []

        // console.log('items', items)
        items.forEach((item, index) => {
          promises.push(
            new Promise((resolve, reject) => {
              // console.log('item', item)
              html2canvas(item).then((canvas) => {
                const url = canvas.toDataURL().split(';base64,')[1] // 去掉base64头
                jszip.file(`${index}.png`, url, { base64: true }) // 将图片存入jszip
                resolve()
              })
            })
          )
        })

        // 所有图片都存入结束后生成压缩包并通过saveAs下载
        Promise.all(promises).then((res) => {
          jszip
            .generateAsync({
              type: 'blob',
            })
            .then((cont) => {
              // console.log('cont', cont)
              saveAs.saveAs(cont, 'photo.zip')
            })
        })
      }
    </script>

    <div class="list">
      <!-- 这里是示例，我用9个框框模拟9个需要截图的页面元素 -->
      <div class="item" style="background-color: aliceblue"></div>
      <div class="item" style="background-color: lightblue"></div>
      <div class="item" style="background-color: lightcoral"></div>
      <div class="item" style="background-color: lightcyan"></div>
      <div class="item" style="background-color: lightgoldenrodyellow"></div>
      <div class="item" style="background-color: lightgray"></div>
      <div class="item" style="background-color: lightgreen"></div>
      <div class="item" style="background-color: lightgrey"></div>
      <div class="item" style="background-color: lightpink"></div>
    </div>
  </body>
</html>

页面就是这样，9个不同颜色的块块

总结：

通过html2canvas将需要截图的页面元素转换成图片
通过jszip插件将图片存入zip，全部存入后生成压缩包photo.zip
通过fileSaver将文件下载

会加速的蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 截图+打包+下载

最近项目中遇到页面上需要大量下载二维码的情况，而二维码又是含有其他页面元素定做的有独特的页面效果。于是想到先将定制二维码转成图片，再将多张图片通过打包再一次性下载~废话不多说，上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
复制链接

扫一扫