使用html2canvas实现屏幕截图
相关文件(vue3.0)
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script> //兼容IE
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
//https://blog-static.cnblogs.com/files/wwj007/bluebird.js
//https://blog-static.cnblogs.com/files/wwj007/html2canvas.js
// 调用html2canvas插件
html2canvas(document.body).then(function (canvas) {
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
// 调用Canvas2Image插件
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
//图片类型.宽度.高度.文件名
let type = document.getElementById('sel') ? document.getElementById('sel').getAttribute('value') : null
let w = document.getElementById('imgW') ? document.getElementById('imgW').getAttribute('value') : null
let h = document.getElementById('imgH') ? document.getElementById('imgH').getAttribute('value') : null
let f = document.getElementById('imgFileName') ? document.getElementById('imgFileName').getAttribute('value') : null
w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空,为空时保持原来的值
h = (h === '') ? canvasHeight : h;
// 调用Canvas2Image插件
Canvas2Image.saveAsImage(canvas, w, h, type, f);
});
兼容 IE
html2canvas(document.body, {
allowTaint: false,
foreignObjectRendering: true,
taintTest: false,
useCORS: true,//火狐浏览器添加项
onrendered: function (canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判断是否是IE11
if (-1 !== userAgent.indexOf("Trident")) {
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
} else {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.setAttribute('crossOrigin', 'anonymous');
newImg.src = dataUrl;
var b = document.createElement('a')
b.setAttribute("href", dataUrl)
b.setAttribute("download", "img.png")
document.body.appendChild(b)//火狐浏览器添加项
b.click(); b.remove()
}
}
});
截图到下载一键完成
使用html2canvas实现屏幕截图的更多相关文章
- js生成二维码/html2canvas生成屏幕截图
1.需求简述 (1) 最初需求: 根据后台接口获取url,生成一个二维码,用户可以长按保存为图片.(这时的二维码只是纯黑白像素构成的二维码) 方案1: 使用jquery.qrcode.min.js插件 ...
- ArcGIS地图打印那些事
记录了通过ArcGIS的PringTask进行地图打印,以及借助html2canvas实现屏幕截图的方法.两个方法各有适用的情景.过程中涉及的相关资源和问题给出链接,自行查看. 1.需求背景 地图打印 ...
- arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
- html2canvas页面截图图片不显示
前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
- html2canvas脚本实现将html内容转换canvas内容
在开始使用html2canvas之前,有一些关于html2canvas及其一些限制的好处. 介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实 ...
- 对html2canvas的研究
介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图. 这 ...
- 9. js屏幕截图
html2canvas 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息 ...
- 使用Python保存屏幕截图(不使用PIL)
起因 在极客学院讲授<使用Python编写远程控制程序>的课程中,涉及到查看被控制电脑屏幕截图的功能. 如果使用PIL,这个需求只需要三行代码: from PIL import Image ...
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
随机推荐
- tp5获取器的用法。
1.命名规则 get + 属性名的驼峰命名+ Attr ------>在相应的model中创建方法 例如: protected function getSexAttr($value ...
- VS部分安全函数用法
在 VS(Visual Studio)下编译C语言程序,有时候VS会报错,提示用到的一些函数可能不安全,并且建议替换为带有_s后缀的安全函数. 安全函数是什么 scanf().gets().fgets ...
- 191121CSS
一.CSS 1.css选择器 css选择器的使用方法 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 汽车Lin总线特点
串行通信:线间干扰小,节省线束,传输距离长 单线传输:增强的ISO 9141 (ISO 15765-1),总线电压基于VBAT 最高速率:20kbit/s 单主多从结构,无需仲裁:主节点同时包含主任务 ...
- leetcode227 基本计算器
1先利用符号栈转化为逆波兰表达式,并添加‘,’作为一个数字的结尾: 2然后利用数字栈计算逆波兰表达式的值: class Solution { public: int calculate(string ...
- Delphi实现带有格式的Excel导出功能
功能预览 运行预览 模板样式 存储返参 导出的Excel 2. 代码实现 //执行sql的函数 procedure TForm1.GetReportData(astrsql:string); var ...
- java:IO流(处理流(缓冲流,转换流,数据流),对象的序列化,Properties)
字节缓冲流:(BufferedInputStream,BufferedOutStream) *按照流的功能来分:节点流和处理流 *节点流可以直接操作数据源: *InputStream *--FileI ...
- Java 注解:@PostConstruct和@PreConstruct
从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...
- IDEA 对spring boot Maven 项目打 Jar 包
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> ...
- shiro登陆认证
1.LoginController @RequestMapping(method = RequestMethod.POST) public String login(User user, HttpSe ...