（五）VUE截图并保存到本地

最新推荐文章于 2025-03-29 18:39:26 发布

HZ-那兔

最新推荐文章于 2025-03-29 18:39:26 发布

阅读量3.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46571481/article/details/124750097

版权

本文介绍了如何使用html2canvas JavaScript插件实现在浏览器端截图并保存电子证书、名片等，通过示例展示了如何设置截图区域和配置参数，包括下载base64图片并本地保存的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

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

具体实现

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

一：下载html2canvas并引入相关页面：

npm install html2canvas --save  或 yarn add html2canvas

import html2canvas from "html2canvas";

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

HTML

<div class="qrcodeColor" ref="creditQrCodeShare"></div>
<div class="myRecode" @click="saveImage" v-preventReClick>点击保存图片</div>

JS

       //保存图片
      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的单击事件
        });
      },