如何用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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue打包时去掉所有的console.log
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
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python中max函数用法实例分析
2015/07/17 Python
python编程实现归并排序
2017/04/14 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python中的类与类型示例详解
2019/07/10 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
安全标语口号
2014/06/09 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP