Recently, in order to solve the overall abnormal information record, the project has studied the full -screen screenshot function of the browser, so that users can quickly screenshots and send them to the administrator when they find abnormalities. The ultimate information recorded in the final record is as follows. The [Screenshot Report Manager] above is achieved using the HTML2CANVAS front -end plug -in.
Introduction to html2canvasIn the past, we could only intercept images through other screenshot tools. The function of modern browsers has become stronger and stronger. With the gradual popularization of H5, the browser itself can take screenshots. HTML2CANVAS is such a front -end plug -in, and its principle is to draw the DOM node in Canvas. Although it is convenient, there is the following limit:
Because my use scenario is simple, it is also defined by myself, and the abnormal page is also defined by myself, then HTML2CANVAS is enough.
Use instanceQuote jQuery, HTML2CANVAS can be used, and the code is simple. I use HTML2CANVAS 0.5.0 version here
HTML2CANVAS (#TBL_Exception), {Onrendered: Function (Canvas) {var url = Canvas.todataurl (); // The following code is downloading this picture function. href, url) .Attr (doubled, getNowFormatdate ()+abnormal information .pngto (body); triggerdownload [0] .click (); triggerdownload.remove ();}});The first parameter is the DOM object to screenshot, and the second parameter is rendered after the recovery 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 spiecified 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-Spacingis used. |
| logging | Boolean | False | WHETHER to Log Events in the console. |
| proxy | string | undefined | Url to the project 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 Servad, Before Reverting Back to Proxyy |
After introducing it, when you talk about the problems you encountered in your use, the screenshot can only intercept the content on the current screen. Find the solution after checking the plug -in source code and debugging. The source code and modified code are posted below
Source code:
Return RenderDocument (node.ownerDocume, Options, Node.OWNERDOCUMENT.DEFAULTView.InnerWidth, node.OWNERDOCUMENT.DEFAULTView.innerheight, INDE X). Thenction (Canvas) {ifof (typeof (options.Onrendered) === Function) {log) {log) (Options.Onrendered is deprecated, html2canvas return, is promise containing the canvas); options.onrendered (canvas);} RETURN Canvas;});Modify code:
// 2016-02-18 Modify the source code to solve the parameter that cannot be used to add a custom width to the full screen to support VAR WIDTH = options.width! = NULL? OPTIONS.WIDTH ; Var height = options.head! = NULL? Opptions.head: node.ownerDocument.DefaultView.innerheight; Return RenderDocument (node.ownerDocument, OPTION s, width, height, index). Thenction (function (Canvas) {ifof (options. onRendered) === Function) {log (options.onrendered is deprecated, HTML2CANVAS RETURNS A Promise Containing The Canvas); Options.OnrendEred (Canvas);} n canvas;});It is mainly to allow users to customize the width and height of the DOM object when calling. The calling method is as follows
$ (#BTN_SCREEN) .on (CLICK, Function () {html2canvas ($ (#tbl_exception), {height: $ (#tbl_exception) .outerheight () + 20, onRendered: fuins. (Canvas) {var url = canvas.todataurl (); //以下代码为下载此图片功能var triggerDownload = $(<a>).attr(href, url).attr(download, getNowFormatDate()+异常信息.png).appendTo(body); triggerDownload[ 0] .clICK (); Triggerdownload.remove ();}});}); SummarizeThrough the front -end plug -in, the full screenshot function of the browser is implemented. I have to say that the H5 function is getting stronger and stronger. The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.