vue2中，html2canvas组件的使用——实现截图并保存到本地

vue2中，html2canvas组件的使用——实现截图并保存到本地

场景：

用户可以实现对当前页面进行截图、保存，适用于各种电子证书、电子名片、海报等场景。

实现：

• 使用html2canvas插件来实现。

html2canvas是一款利用javascript进行屏幕截图的插件，它能够实现在用户浏览器端直接对整个或部分页面进行截屏。

1、安装插件

npm install html2canvas --save  

yarn add html2canvas

2、页面引入

import html2canvas from "html2canvas"

3、通过ref属性设置需要保存的内容区域

demo.vue

<template>
  <div>
    <div class="imgColor" ref="creditQrCodeShare">
      <el-button type="primary">主要按钮</el-button>
    </div>
    <div class="myRecode" @click="saveImage" v-preventReClick>点击保存图片</div>
  </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
  methods: {
    //保存图片
    saveImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.creditQrCodeShare, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
        this.imgUrl = url;
        //将图片下载到本地
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "截图名称"; // 设置图片名称没有设置则为默认
        a.href = this.imgUrl; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      });
    },

  }
}
</script>
<style>
.imgColor {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
</style>

效果-截图到本地