使用 html2canvas 插件通过 id 对元素截图

奋斗吧

擅长邻域：未填写

标签：使用 html2canvas 插件通过 id 对元素截图 JavaScript博客 51CTO博客

2023-03-27 18:23:24 214浏览

使用 html2canvas 插件通过 id 对元素截图，html2canvas是一个基于JavaScript的开源插件，它可以将网页上的任何DOM元素（包括HTML代码、SVG图像和canvas元素）转换成图片，并允许进行一些图片处理。它可以通过canvas技术将一个页面上的内容全部或部分截图，并转换为PNG或JPEG格式的图片数据或对象。html2canvas插件可以用于网页截图、网页设计、HTML模板生成、PDF生成等领域。它支持多种浏览器和平台，包括Chrome、Firefox、Safari、Edge、iOS和Android等设备。同时，它还提供了丰富的配置选项，可以控制截图的大小、质量、背景色、是否允许跨域等等。html2canvas插件的使用相对简单，只需要引入相关的JavaScript文件并调用其API即可实现截图功能。不过需要注意的是，在某些情况下，如使用CDN资源等，可能会出现图片无法正常加载的问题，需要特别处理。

一、插件安装

pnpm install html2canvas

二、具体实现

需求

点击“截图”实现对特定元素（id: target-element）截取

使用 html2canvas 插件通过 id 对元素截图_html

参数及解释

scale: 0.8, // 图片大小倍数
useCORS: true, // 解决跨域问题
allowTaint: true, // 允许画布内使用外部资源
backgroundColor: null, // 设置背景色为透明，默认为白色
logging: false, // 关闭html2canvas日志输出
imageSmoothingEnabled: false // 关闭抗锯齿

实现代码（Vue）

<template>
  <div id="target-element">
    <div id="btn" @click="saveAsImage">截图</div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>
<script>
  import html2canvas from "html2canvas";
  import HelloWorld from "./components/HelloWorld.vue";

  export default {
    name: "App",
    components: {
      HelloWorld,
    },
    methods: {
      saveAsImage() {
        const element = document.querySelector("#target-element");
        const options = {
          scale: 0.8,
          useCORS: true,
          allowTaint: true,
          logging: false,
          imageSmoothingEnabled: false,
        };
        html2canvas(element, options).then(function (canvas) {
          const imgData = canvas.toDataURL("image/png");
          const link = document.createElement("a");
          link.download = "screenshot.png";
          link.href = imgData;
          link.click();
        });
      },
    },
  };
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  #btn {
    cursor: pointer;
    background-color: antiquewhite;
    color: #2c3e50;
    border-radius: 20%;
    width: 40px;
    margin: 0 auto;
    padding: 10px;
  }
</style>