使用html2canvas怎么截图浏览器

本篇文章给大家分享的是有关使用html2canvas怎么截图浏览器，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

作用

html2canvas可以通过纯js对浏览器端经行截屏，但截图的精确度还有待提高，部分CSS不可识别，所以在canvas中不能完美呈现原画面样式

     .book_inf{            position: relative;             overflow : hidden;            text-overflow: ellipsis;            display: -WEBkit-box;            -webkit-line-clamp: 2;            -webkit-box-orient: vertical;        }

支持的浏览器

1. Firefox 3.5+

2. Google Chrome

3. Opera 12+

4. IE9+

5. Safari 6+

基本语法

function screenshotsImg(){       html2canvas(document.querySelector("#screenshots"),{            backgroundColor: 'transparent',// 设置背景透明        }).then(canvas => {            canvasTurnImg(canvas) //保存的图片格式转换方法        });    }

可用配置项

设置图片格式

从canvas中直接提取图片元数据

  // 图片导出为 png 格式        var type = 'png';        var imgData = canvas.toDataURL(type);

将mime-type改为image/octet-stream，强制让浏览器直接download

var _fixType = function(type) {    type = type.toLowerCase().replace(/jpg/i, 'jpeg');    var r = type.match(/png|jpeg|bmp|gif/)[0];    return 'image/' + r;};   // 加工image data，替换mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');

图片download到本地

var saveFile = function(data, filename){    var save_link = document.createElementNS('Http://www.w3.org/1999/xhtml', 'a');    save_link.href = data;    save_link.download = filename;       var event = document.createEvent('MouseEvents');    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);    save_link.dispatchEvent(event);};   // 下载后的文件名var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;// downloadsaveFile(imgData,filename);

以上就是使用html2canvas怎么截图浏览器，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。