JavaScript 截取 HTML 生成图片

砺能2025-09-25 11:00

什么是 html2canvas

html2canvas 是一个强大的 JavaScript 库，它可以将 HTML 元素渲染成画布（Canvas），然后将其转换为图像。这个库支持大多数现代浏览器，并且易于使用。

安装 html2canvas

使用 npm 进行安装

js 复制代码

npm install html2canvas

也可以通过 CDN 引入

js 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

基本用法

js 复制代码

<template>
  <div class="html2Img_wrapper" ref="containerRef">
    <img src="/src/assets/img.jpg" width="300" />
    <h3>ryutyrurt</h3>
    <button @click="handleHtml2Img">转换为图片</button>
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
const containerRef = ref();

const handleHtml2Img = () => {
  html2canvas(containerRef.value, {
    scale: 2,
    useCORS: true,
    logging: true,
  })
    .then((canvas) => {
      // 方法一：转为base64;
      const img = canvas.toDataURL("image/png");
      const imgElement = document.createElement("img");
      imgElement.src = img;
      document.body.appendChild(imgElement);
      
      // 方法二：生成blob;
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "页面截图.png";
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
          URL.revokeObjectURL(url);
          a.remove();
        }, 100);
        console.log(url);
      });
    })
    .catch((err) => {
      console.log("转换失败:", err);
    });
};
</script>

拓展

js如何见html转换成图片
 前端实现HTML转图片并导出的完整方案
 使用 JavaScript 截取 HTML 并生成图片：html2canvas