Screenshots with JavaScript

Using JavaScript, I would like to recommend two open-source components here: one is Canvas2Image, which can program Canvas graphics to PNG/JPEG/BMP images. However, it is not enough, we need to give arbitrary DOM (at least the vast majority), which requires html2canvas, which can DO... syntaxHighl uses JavaScript. Here I would like to recommend two open-source components: Canvas2Image, which can program the Canvas plot to PNG/JPEG/BMP images. However, it is not enough, 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 uses the canvas object of HTML5 to provide the toDataURL () API: var strDataURI = oCanvas. toDataURL (); // returns "data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt... "The 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: // returns an element containing the converted PNG image var oImgPNG = Canvas2Image. saveAsPNG (oCanvas, true); but if you do a JavaScript function, you may want to automatically open the "save" dialog box for saving the file: 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 DOM loading, collects information, and draws a 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. For example, javascript must be in the same domain. In cross-domain situations, you need to use a proxy server (parameters in the API can be specified). 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 such as 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: Examples of API use: html2canvas ([dom1, dom2], {logging: false, useCORS: false, proxy: false, onrendered: function (canvas) {// canvas indicates that the drawn canvas is an object}). For this class of relatively small class libraries, the documentation is very poor, including API definition, you need to read the source code and write it clearly. In addition, there is a JQuery plug-in the download package of the site, which encapsulates the API and can be ignored.