运用插件html2canvas浏览器截屏的方法

运用插件html2canvas浏览器截屏的方法
首先先安装 html2canvas 插件

toIMage() {// 获取dom元素let canvasBox = this.imageToFileRef;const canvas = document.createElement("canvas");//获取父级的宽高const width = parseInt(window.getComputedStyle(canvasBox).width);const height = parseInt(window.getComputedStyle(canvasBox).height);//宽高 *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 canvasResult =  html2canvas(canvasBox,{allowTaint:true})const capture = canvasResult.toDataURL('image/png')//下载浏览器弹出下载信息的属性const saveInfo = {//导出文件格式自己定义，我这里用的是时间作为文件名download:`截图.png`,href:capture}//下载,浏览器弹出文件下载提示this.downloadFile(saveInfo)},

然后就直接可以截图了。。。

记得把这个属性设置为true;;不然下载的图片是黑屏。。。。

运用插件html2canvas浏览器截屏的方法相关推荐

Chrome浏览器截屏插件的开发
目录第一章绪论 1 1.1选题背景及意义 1 1.2发展现状研究 2 1.2.1浏览器简介 2 1.2.2 浏览器发展历程 2 1.2.3 浏览器分类 3 1.2.4 chrome浏览器简介 3 ...
js截屏代码_服务端浏览器截屏
服务端浏览器截屏是结合 selenium + html2canvas 实现的通过在 Chrome 环境下生成图片. selenium是最广泛使用的开源Web UI自动化测试套件之一.本文中使用sele ...
golang实现服务端浏览器截屏
" 每天,探索一点点." 笔者近期在使用golang进行开发工作时,受360技术公众号曾发布过文章的启发,想到是否可以使用golang操作无屏浏览器(headless browse ...
golong实现服务端浏览器截屏
笔者说:近期在使用golang进行开发工作时,受360技术公众号曾发布过文章的启发,想到是否可以使用golang操作无屏浏览器(headless browser)实现诸如爬虫.截屏.自动化测试等功能. ...
Python+Selenium_UI自动化操作(5)——浏览器截屏
UI自动化--浏览器截屏练习: 用chrome浏览器打开不同的网页,并截屏. 语法: get_screenshot_as_file("图片名.格式") 数据准备: 将网页的域名w ...
android webview 截图,Android获取webView快照与屏幕截屏的方法 -电脑资料
前段时间做的一个书店项目其阅读模块中用到了WebView + js,今天把WebView这块用到的几个特性记录下, 其主要用到了webView的快照与屏幕的截屏.部分代码如下: [html] /** ...
苹果电脑以及iPhone上截屏的方法介绍
<script type="text/javascript"> </script> <script src="http://pagead2. ...
多御安全浏览器锁屏功能上线，详解设置浏览器锁屏的方法
2022年8月13日,多御安全浏览器锁屏功能正式上线啦!此次最新版本android版 1.7.5增加了密码锁屏功能,旨在保护用户的隐私安全和数据安全,让隐私保护更进一步.那么这个锁屏功能在哪里,我们应 ...
小米手机实时截屏的方法
之前使用minicap对安卓手机快速截屏的方法,对miui10以上的版本不支持. 小米手机miui10以上的版本可以通过javac.py实现快速截屏. 操作方式下载Yosemite.apk 注意: ...

运用插件html2canvas浏览器截屏的方法

运用插件html2canvas浏览器截屏的方法相关推荐

最新文章

热门文章