JavaScript implements the web page screenshot function, and javascript implements the screenshot function.

JavaScript implements web page functions, and javascript implements

To use JavaScript, I would like to recommend two open-source components: Canvas2Image, which can program images of PNG, JPEG, and BMP in Canvas plotting. However, it is not enough to use it, we need to give any DOM (at least the vast majority), which requires html2canvas, which can convert the DOM object into a canvas object. By combining the two functions, you can convert the DOM on the page into PNG or JPEG images, which is cool.

Canvas2Image

It uses the canvas object of HTML5 to provide the toDataURL () API:
Copy codeThe Code is as follows:
Var strDataURI = oCanvas. toDataURL ();
// Returns "data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt ..."

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

However, there are also many defects. For example, currently Opera and Safari only support PNG, while FireFox supports much better.

There are two ways to write an image to a page. One is to generate an image object and write it to the DOM tree of the page. This is also a good support method:
Copy codeThe Code is as follows:
// Returns an element containing the converted PNG image
Var oImgPNG = Canvas2Image. saveAsPNG (oCanvas, true );

However, if you do a JavaScript function, you may want to automatically open the "save" dialog box for saving the file:

Copy codeThe Code is as follows:
Canvas2Image. saveAsPNG (oCanvas );
// Will prompt the user to save the image as PNG.

This method generates a data stream with the mimeType of "image/octet-stream" to the browser, but the "save" dialog box cannot identify the appropriate Suffix of the image, the default file saved in FireFox is "xxx. this is a pity, but it seems that there is no good solution.

Html2canvas

It acts on the DOM loading process, collects the information, and then draws the canvas image. That is to say, it does not cut the displayed DOM tree into a canvas image, instead, a canvas chart is re-drawn based on the DOM tree. Therefore, many CSS styles cannot be accurately identified and cannot be accurately reflected on the graph.

There are many other restrictions, such:

● Javascript must be in the same domain. In cross-domain scenarios, you need to use a proxy server (you can specify parameters in the API). The same applies to images;
● The DOM tree in the frame cannot be accurately drawn;
● Because the canvas image is to be drawn, a browser like IE8 needs to use a third-party library such as FlashCanvas.

This page can be used to test the effects of various websites. The results are quite good:

Example of API usage:

Copy codeThe Code is as follows:
Html2canvas (
[Dom1, dom2],
{
Logging: false,
UseCORS: false,
Proxy: false,
Onrendered: function (canvas ){
// Canvas indicates that the drawn canvas is an object.
}
}
);

For this type of relatively small class libraries, the documentation is very poor, including the definition of the API. You need to read the source code and write the code clearly.

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

Use javascript to implement the current page

This cannot be implemented using javascript. JS does not support image operations. This function must be implemented through the client plug-in.

How can Javascript draw on a webpage?

Use canvas to implement your desired functions, provided that you support HTML5 browsers.