如何用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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 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
UCenter Home二次开发指南
2009/05/28 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
Javascript实现的分页函数
2007/02/07 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
vue实现选中效果
2020/10/07 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python解惑之True和False详解
2017/04/24 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python中cPickle类使用方法详解
2018/08/27 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
给幼儿园老师的表扬信
2014/01/19 职场文书
加工操作管理制度
2014/01/19 职场文书
一体化教学实施方案
2014/05/10 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Python实现视频中添加音频工具详解
2021/12/06 Python