使用html2canvas实现浏览器截图的示例代码


Posted in HTML / CSS onJanuary 26, 2018

使用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+

基本语法

/*参数:
* #screenshots 所需要截图的元素id,截图后要执行的函数,
* backgroundColor 配置项背景色
* canvas为截图后返回的最后一个canvas
*/
function screenshotsImg(){
       html2canvas(document.querySelector("#screenshots"),{
            backgroundColor: 'transparent',// 设置背景透明
        }).then(canvas => {
            canvasTurnImg(canvas) //保存的图片格式转换方法
        });
    }

可用配置项

参数名称 类型 默认值 描述
allowTaint boolean false Whether to allow cross-origin images to taint the canvas---允许跨域
background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色,如果没有设定默认白色此处被坑,我改为backgroundColor可用
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
logging boolean false Whether to log events in the console.---在console.log()中输出信息
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
taintTest boolean true Whether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟,默认延迟为0,单位毫秒
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--跨域代理

设置图片格式

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

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

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

/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
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 type
imgData = imgData.replace(_fixType(type),'image/octet-stream');

3、图片download到本地

/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
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;
// download
saveFile(imgData,filename);

案例

案例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 #HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 #HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 #HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 #HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 #HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 #HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 #HTML / CSS
You might like
PHP超级全局变量数组小结
2012/10/04 PHP
php构造函数实例讲解
2013/11/13 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python解析nginx日志文件
2015/05/11 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python单链表简单实现代码
2016/04/27 Python
python 实现A*算法的示例代码
2018/08/13 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python将string转换到float的实例方法
2019/07/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
jupyter notebook实现显示行号
2020/04/13 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
反腐倡廉标语
2014/06/24 职场文书
首席执行官观后感
2015/06/03 职场文书
中秋节随笔
2015/08/15 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android