如何用vue实现网页截图你知道吗


Posted in Vue.js onNovember 17, 2021

1、安装html2Canvas

npm install html2canvas --save

2、在需要的vue组件中引入

import html2canvas from "html2canvas";

3、编写一个截图按钮

<el-button class="button-dalod" size="mini" title="生成图片" @click="toImage()" icon="el-icon-download"></el-button>

4、调用函数toImage

// 页面元素转图片
        toImage () {
            // 手动创建一个 canvas 标签
            const canvas = document.createElement("canvas")
            // 获取父标签,意思是这个标签内的 DOM 元素生成图片
            // imageTofile是给截图范围内的父级元素自定义的ref名称
            let canvasBox = this.$refs.imageTofile
            // 获取父级的宽高
            const width = parseInt(window.getComputedStyle(canvasBox).width)
            const height = parseInt(window.getComputedStyle(canvasBox).height)
            // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
            canvas.width = width * 2
            canvas.height = height * 2
            canvas.style.width = width + 'px'
            canvas.style.height = height + 'px'
            const context = canvas.getContext("2d");
            context.scale(2, 2);
            const options = {
                backgroundColor: null,
                canvas: canvas,
                useCORS: true
            }
            html2canvas(canvasBox, options).then((canvas) => {
                // toDataURL 图片格式转成 base64
                let dataURL = canvas.toDataURL("image/png")
                console.log(dataURL)
                this.downloadImage(dataURL)
            })
        },
        //下载图片
        downloadImage(url) {
            // 如果是在网页中可以直接创建一个 a 标签直接下载 
            let a = document.createElement('a')
            a.href = url
            a.download = '首页截图'
            a.click()
        },

别忘了给页面所在截图范围内的父级添加ref属性,方便canvas找到父级计算宽高从而截屏

如何用vue实现网页截图你知道吗

这就是截图出来的效果:

如何用vue实现网页截图你知道吗 

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
详解vue 组件注册
Nov 20 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
详细聊聊vue中组件的props属性
一定要知道的 25 个 Vue 技巧
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
You might like
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python内置模块turtle绘图详解
2017/12/09 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python开发入门——列表生成式
2020/09/03 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
金融专业个人求职信范文
2013/11/28 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
教师评语大全
2014/04/28 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript