WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)

前言：

html2canvas 是一个 JavaScript 库，其主要作用是将 HTML 元素或其部分内容渲染为 Canvas 图像。通过它，开发者可以将网页中的任意 DOM 元素（包括文本、图片、样式等）转换为图片格式（如 PNG 或 JPEG），并进一步用于保存、分享或其他处理。

html2canvas 的使用：

安装html2canvas

npm install html2canvas --save

vue3示例：

完整代码：

<template>
  <div>
    <div class="image-box" ref="downloadRef">
      <div class="text">恭顺安康</div>
      <img class="picture" src="@/assets/images/study-dog.png" alt="" />
    </div>
    <el-button type="primary" plain @click="download">下载图片</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import html2canvas from 'html2canvas'

const downloadRef = ref();
const download = () => {
  html2canvas(downloadRef.value).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
    // 创建a标签下载图片
    var addElement = document.createElement("a");
    addElement.href = dataURL;
    addElement.download = "恭顺安康.png"; //设置下载的图片名称
    document.body.appendChild(addElement);
    addElement.click();
    document.body.removeChild(addElement);
  });
};
</script>

<style lang="less" scoped>
.image-box {
  width: 500px;
  height: 520px;
  border: 1px solid #ccc;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 10px;

  .text {
    color: #fff;
    margin-bottom: 10px;
  }
  .picture {
    width: 400px;
    height: 400px;
  }
}
</style>

效果演示：

我们还可以将base64格式的图片转化成file或blob格式的图片，兼容性会更好一些。完整代码如下：

<template>
  <div>
    <div class="image-box" ref="downloadRef">
      <div class="text">恭顺安康</div>
      <img class="picture" src="@/assets/images/study-dog.png" alt="" />
    </div>
    <el-button type="primary" plain @click="download">下载图片</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import html2canvas from "html2canvas";

const downloadRef = ref();

const dataURLtoBlob = (dataurl) => {
  var arr = dataurl.split(","); //分割为数组，分割到第一个逗号
  let bstr = window.atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: "png" });
};

const download = () => {
  html2canvas(downloadRef.value).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
    const blobUrl = dataURLtoBlob(dataURL); //转化成blob格式的图片 Blob{size:xx,type:xx}
    var fileUrl = URL.createObjectURL(blobUrl); //URL.createObjectURL()创建一个指向File或Blob对象的URL。这个URL可以被用于指定一个HTML标签的href属性

    // 创建a标签下载图片
    var addElement = document.createElement("a");
    addElement.href = fileUrl;
    addElement.download = "恭顺安康.png";
    document.body.appendChild(addElement);
    addElement.click();
    document.body.removeChild(addElement);
  });
};
</script>

<style lang="less" scoped>
.image-box {
  width: 500px;
  height: 520px;
  border: 1px solid #ccc;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 10px;

  .text {
    color: #fff;
    margin-bottom: 10px;
  }
  .picture {
    width: 400px;
    height: 400px;
  }
}
</style>

效果同上~

拓展

html2canvas主要作用和应用场景？

主要作用

1. 将 HTML 转换为图片

   • html2canvas 可以将网页中的特定区域或整个页面转换为图片，支持复杂的 CSS 样式（如渐变、阴影、边框等）。

   • 示例：将网页中的某个 <div> 元素转换为图片。

2. 生成截图

   • 用于生成网页的截图，用户可以保存或分享这些截图。

   • 示例：生成网页的缩略图或用户自定义内容的截图。

3. 保存网页内容

   • 将网页中的内容保存为图片格式，方便用户下载或分享。

   • 示例：用户点击"保存为图片"按钮，将网页内容保存为 PNG 文件。

4. 实现网页打印功能

   • 将网页内容转换为图片后，可以用于打印或生成 PDF。

   • 示例：将网页中的表格或图表转换为图片并打印。

5. 动态生成图片

   • 结合用户输入或动态数据，实时生成图片。

   • 示例：根据用户输入生成自定义海报或证书。

6. 跨平台兼容

   • 在移动端和桌面端均可使用，支持主流浏览器。

   • 示例：在移动端生成分享图片。

使用场景

1. 网页截图工具

   用户可以通过点击按钮将网页内容保存为图片。

2. 生成分享图片

   在社交媒体分享时，将网页内容转换为图片，方便传播。

3. 数据可视化

   将图表、地图等可视化内容保存为图片。

4. 网页内容存档

   将网页内容保存为图片格式，用于存档或备份。

5. 自定义海报或证书

根据用户输入动态生成图片，如活动海报、电子证书等。

为什么blob格式的图片会比base64格式的图片兼容性更好一些？

Blob 格式的图片比 Base64 格式的图片兼容性更好，主要是因为它们在存储、传输和处理方式上的差异。以下是具体原因：

1. 文件大小

• Blob：Blob 是二进制数据，存储的是文件的原始二进制形式，因此文件大小与原始图片一致，不会额外增加体积。

• Base64：Base64 是一种文本编码方式，它将二进制数据转换为 ASCII 字符串，会导致数据体积增加约 33%。这会增加内存占用和传输开销。

兼容性影响：

• 对于大图片或大量图片，Base64 会增加内存和网络负担，可能导致性能问题，而 Blob 则更高效。

---

2. 数据传输效率

• Blob ：Blob 是二进制数据，适合直接用于网络传输（如通过 fetch 或 XMLHttpRequest 上传或下载），传输效率高。

• Base64：Base64 是文本格式，传输时需要额外的编码和解码步骤，效率较低。

兼容性影响：

• 在网络传输中，Blob 格式更高效，尤其是在移动端或网络环境较差的情况下。

---

3. 浏览器处理方式

• Blob：Blob 是浏览器原生支持的二进制数据格式，可以直接用于图片渲染、文件下载等操作，兼容性更好。

• Base64：Base64 需要浏览器额外解码为二进制数据后才能使用，增加了处理步骤。

兼容性影响：

• 在某些低版本浏览器或特殊环境中，Base64 可能会遇到解码问题，而 Blob 的支持更广泛。

---

4. 内存占用

• Blob：Blob 是二进制数据，存储和渲染时占用的内存较少。

• Base64：Base64 是文本格式，存储和渲染时会占用更多内存。

兼容性影响：

• 对于内存有限的设备（如移动端），Base64 可能导致内存不足或性能下降，而 Blob 更节省资源。

---

5. URL 使用

• Blob ：可以通过 URL.createObjectURL(blob) 生成一个临时 URL，直接用于图片渲染或文件下载。

• Base64 ：Base64 数据可以直接嵌入到 src 属性中（如 data:image/png;base64,...），但会导致 HTML 或 CSS 文件体积增大。

兼容性影响：

• Base64 数据嵌入 HTML 或 CSS 中可能会导致文件过大，影响加载速度，而 Blob 的临时 URL 更灵活且高效。

---

6. 安全性

• Blob：Blob 是二进制数据，不易被直接修改或注入恶意代码。

• Base64：Base64 是文本格式，容易被篡改或注入恶意内容。

兼容性影响：

• 在安全性要求较高的场景中，Blob 更可靠。

---

7. API 支持

• Blob ：现代浏览器广泛支持 Blob，并且可以与 File、FileReader、FormData 等 API 无缝配合。

• Base64：虽然 Base64 也被广泛支持，但在某些 API 中需要额外处理（如解码）。

兼容性影响：

• Blob 更适合与现代 Web API 结合使用，兼容性更好。

总结

特性	Blob 格式	Base64 格式
文件大小	原始大小，无额外开销	增加约 33% 的体积
传输效率	高效，适合网络传输	较低，需要编码和解码
内存占用	较少	较多
浏览器支持	广泛支持，原生二进制格式	需要额外解码
URL 使用	生成临时 URL，灵活高效	直接嵌入 HTML/CSS，可能导致文件过大
安全性	较高，不易篡改	较低，易被篡改
API 支持	与现代 API 无缝配合	需要额外处理

因此，Blob 格式的图片在文件大小、传输效率、内存占用、浏览器支持和安全性等方面表现更好，兼容性更强，尤其是在处理大文件或高性能要求的场景中。而 Base64 格式更适合用于小图片或需要直接嵌入文本的场景（如邮件或简单的数据存储）。