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

您所在的位置：网站首页 › 优酷截屏怎么保存到本地 › （五）VUE截图并保存到本地

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

#（五）VUE截图并保存到本地| 来源: 网络整理| 查看: 265

项目场景：

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

具体实现

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

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

npm install html2canvas --save 或 yarn add html2canvas import html2canvas from "html2canvas";

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

HTML

点击保存图片

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

【本文地址】

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

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

今日新闻

推荐新闻