WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)_canvas把dom元素转成图片-优快云博客

本文链接：https://blog.youkuaiyun.com/yxlyttyxlytt/article/details/145761331

前言：

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主要作用和应用场景？

主要作用

将 HTML 转换为图片

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

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

生成截图

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

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

保存网页内容

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

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

实现网页打印功能

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

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

动态生成图片

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

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

跨平台兼容

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

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

使用场景

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

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

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

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

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

为什么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 无缝配合	需要额外处理