Using JavaScript screenshots, I would like to recommend two open source components here: one is Canvas2Image, which can program the Canvas drawing and programming PNG/JPEG/BMP images; but having it alone is not enough. We need to take screenshots of any DOM (at least the vast majority), which requires html2canvas, which can convert the DOM object into a canvas object. Combining the functions of the two, you can take the DOM screenshot on the page into PNG or JPEG images, which is very cool.
Canvas2Image
Its principle is to use the HTML5 canvas object to provide the toDataURL() API:
The code copy is as follows:
var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
The result is base64-encoded (in fact, image can also be written to the page in this way in the form of a string), so we also need a base64-encoded lib.
However, there are many defects at present. For example, Opera and Safari only support PNG, while FireFox is much better supportive.
There are two ways to write pictures to the page. One is to generate an image object to write to the page DOM tree, which is also a better supportive method:
The code copy is as follows:
// returns an <img> element containing the converted PNG image
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);
But if you do a JavaScript screenshot function, you may want to automatically open the "Save" dialog box for saving the file after the screenshot:
The code copy is as follows:
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 cannot recognize the appropriate suffix name of the image. The default saved file is called "xxx.part" under FireFox. This is a pity, but there seems to be no good solution.
html2canvas
It acts on the DOM loading process, collects the information in it, and then draws the canvas image. In other words, it does not actually cut the displayed DOM tree into a canvas picture, but instead re-draws a canvas picture based on the DOM tree. Therefore, many CSS styles cannot be accurately identified and cannot be accurately reflected on the figure.
There are many other restrictions, such as:
●Javascript must be of the same domain. For cross-domain situations, you need to use a proxy server (there are parameters in the API that can be specified), and the same is true for image;
●The DOM tree in the frame cannot be accurately drawn;
●Because you want to draw a canvas diagram, browsers like IE8 need to use third-party libraries like FlashCanvas.
This page can test the effect of using it to screenshots in each website, and the effect is quite good:
Examples of API usage:
The code copy is as follows:
html2canvas(
[dom1, dom2],
{
logging: false,
useCORS: false,
proxy: false,
onrendered: function(canvas){
// canvas is the drawn canvas object
}
}
);
For this type of relatively niche class library, the documentation is very poor, including the definition of the API, which requires reading the source code and is written clearly in the code.
In addition, there is also a JQuery plug-in in the download package of this site, which has encapsulated this API and can be ignored.