使用实例
引用jquery,html2canvas即可,使用代码也很简单。我这里使用的是 html2canvas 0.5.0 版本
1
2
3
4
5
6
7
8
9
|
html2canvas($( "#tbl_exception" ), { onrendered: function (canvas) { var url = canvas.toDataURL(); //以下代码为下载此图片功能 var triggerDownload = $( "<a>" ).attr( "href" , url).attr( "download" , getNowFormatDate()+ "异常信息.png" ).appendTo( "body" ); triggerDownload[0].click(); triggerDownload.remove(); } }); |
第一个参数是要截图的Dom对象,第二个参数时渲染完成后回调的canvas对象。
Name | Type | Default | Description |
---|---|---|---|
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 |
height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window. |
letterRendering | boolean | false | Whether to render each letter seperately. Necessary ifletter-spacing is used. |
logging | boolean | false | Whether to log events in the console. |
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. |
width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window. |
useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy |
问题分析
介绍完使用之后,说说自己使用中遇到的问题,截图只能截取当前屏幕内的内容。在查看插件源码,进行调试之后找到了解决方案。下面贴出源码和修改后的代码
源码:
1
2
3
4
5
6
7
|
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then( function (canvas) { if ( typeof (options.onrendered) === "function" ) { log( "options.onrendered is deprecated, html2canvas returns a Promise containing the canvas" ); options.onrendered(canvas); } return canvas; }); |
修改代码:
1
2
3
4
5
6
7
8
9
10
|
//2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持 var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth; var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight; return renderDocument(node.ownerDocument, options, width, height, index).then( function (canvas) { if ( typeof (options.onrendered) === "function" ) { log( "options.onrendered is deprecated, html2canvas returns a Promise containing the canvas" ); options.onrendered(canvas); } return canvas; }); |
主要是让用户调用时能够自定义需要截取Dom对象的宽和高,现在调用方式如下
1
2
3
4
5
6
7
8
9
10
11
12
|
$( "#btn_screen" ).on( "click" , function () { html2canvas($( "#tbl_exception" ), { height: $( "#tbl_exception" ).outerHeight() + 20, onrendered: function (canvas) { var url = canvas.toDataURL(); //以下代码为下载此图片功能 var triggerDownload = $( "<a>" ).attr( "href" , url).attr( "download" , getNowFormatDate()+ "异常信息.png" ).appendTo( "body" ); triggerDownload[0].click(); triggerDownload.remove(); } }); }); |
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容