【vue】html2canvas截图demo完整代码

小码助力助你前行

已于 2022-07-01 17:13:25 修改

阅读量399

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-06 18:59:48 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/125152252

版权

效果图

哈哈哈哈哈

一、安装 html2canvas.js

npm install --save html2canvas@1.0.0-rc.4

二、完整代码

<template>
  <div class="individuation">
    <!-- 把需要生成图片的元素放在一个元素容器里,设置ref -->
    <div ref="imageTofile">
      　　<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
      哈哈哈哈
    </div>
    <!-- 如果需要展示截取的图片,给一个img标签 -->
    <img :src="htmlUrl" />
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      htmlUrl: "",
    };
  },
  mounted() {
    this.toImage();
  },
  methods: {
    // 页面元素转图片
    toImage() {
      let option = {
        scale: 3,
        useCORS: true,
        backgroundColor: null,
      }; // 第一个参数是