Screenshot with JavaScript

Using JavaScript to take screenshots, here I would like to recommend two open source components: one is Canvas2Image, which can program Canvas drawing into PNG/JPEG/BMP images; but it is not enough alone, we need to create any DOM (at least most of them) ) screenshot, this requires html2canvas, which can convert the DOM object into a canvas object. Combining the functions of the two, you can screenshot the DOM on the page into a PNG or JPEG image, which is very cool.

Canvas2Image

Its principle is to use the HTML5 canvas object to provide the toDataURL() API:

var strDataURI = oCanvas.toDataURL();

// returns "data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

Such a result is base64 encoded (in fact, the image can also be written to the page in the form of a string in this way), so we also need a base64 codec lib.

However, there are currently many flaws. For example, Opera and Safari currently only support PNG, while FireFox has much better support.

There are two ways to generate images and write them into the page. One is to generate an image object and write it into the page DOM tree. This is also a more supportive way:

// returns an element containing the converted PNG image

var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

But if you make a JavaScript screenshot function, you may want to automatically open the "Save" dialog box to save the file after taking the screenshot:

Canvas2Image.saveAsPNG(oCanvas);

// will prompt the user to save the image as PNG.

Calling this method will generate a data stream with mimeType "image/octet-stream" to the browser, but " The "Save" dialog box cannot recognize the appropriate suffix name for the image. The default file saved under FireFox is "xxx.part". This is regrettable, but there seems to be no good way to solve it.

html2canvas

It acts on the DOM loading process, collects the information, and then draws the canvas image. In other words, in fact, it does not cut the displayed DOM tree into a canvas image, but imitates the DOM tree. Redrawn a canvas diagram. Therefore, many CSS styles cannot be accurately recognized and cannot be accurately reflected on the image.

There are many other restrictions, such as:

javascript must be in the same domain. For cross-domain situations, a proxy server needs to be used (there are parameters in the API that can be specified), and the same is true for images;

The DOM tree within the frame cannot be drawn accurately;

Because the canvas image is drawn, browsers like IE8 need to use a third-party library such as FlashCanvas.各 This page can test the effect of each website using it to take screenshots. The effect is pretty good:

HTML2CANVAS (

[Dom1, DOM2],

{

logging: false,

              useCORS: false,

                     -                                                                         useCORS: false,

                  out out out out out way out's ’   out out out’s out out out out out out out out out out out out of   ‐ ‐ ‐ ‐ ‐ ​ ​ ​ ​ ​ ​ ​ ​

}

);

For this category For a relatively niche class library, the documentation is very poor, including the definition of the API. You need to read the source code, and the code is clearly written.

In addition, there is a JQuery plug-in in the download package of this site, which encapsulates this API and can be ignored.