如何用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+iview分页组件的封装
Nov 17 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
如何优化vue打包文件过大
Apr 13 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python实现区域填充的示例代码
2021/02/03 Python
python实现经典排序算法的示例代码
2021/02/07 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
10条PHP编程习惯
2014/05/26 面试题
2014年行政执法工作总结
2014/12/11 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
检讨书格式
2019/04/25 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
JavaScript 反射学习技巧
2021/10/16 Javascript
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL