Screenshot with JavaScript __java

Source: Internet
Author: User
Tags base64 bmp image
With JavaScript screenshots, here I recommend two open source components: One is canvas2image, it can canvas drawing programming png/jpeg/bmp image; But it's not enough, we need to get a screenshot of any Dom (or at least most of it). This requires Html2canvas, which converts a DOM object to a canvas object. Combining the two functions, you can take a screenshot of the DOM on the page into PNG or JPEG images, which is cool.   Canvas2image   Its rationale is to use the HTML5 canvas object to provide the Todataurl () API:   var Strdatauri = Ocanvas.todataurl ();  //returns "Data:image/png;base64,ivborw0kggoaaaansuheugaaamgaaadicayaaact ..." This result is Base64 encoded (in fact, image can also be written to the page in the form of a string), so we also need a base64 codec of the Lib.   But there are a lot of flaws at the moment, such as opera and Safari, which only support Png,firefox in a much better situation.   Generate pictures There are two ways to write a page, one is to generate a picture object to write to the page Dom tree, which is also a good way to support:  //Returns an element containing the Converted PNG image   var oimgpng = Canvas2image.saveaspng (Ocanvas, true);      But if you do a JavaScript screenshot, you may want to automatically open the Save dialog box for the saved file after the screenshot:   Canvas2image.saveaspng (Ocanvas); Would prompt the user to save the image as PNG.   This call will generate a mimetype "Image/octet-stream" data stream to the browser, but the "Save" dialog box does not recognize the appropriate suffix name of the picture, the default saved file under Firefox is "Xxx.part" this name, This is a regrettable place, but there seems to be nothingGood way to solve.   Html2canvas   It acts on the process of the DOM loading, collects the information, and then draws the canvas image, that is, it does not truncate the displayed DOM tree into a canvas graph, but instead draws a map of the canvas from the DOM tree. So many CSS styles can not be accurately identified, can not be accurately reflected in the diagram.   Other restrictions, such as:   JavaScript must be the same domain, for cross-domain situations need to use a proxy server (API parameters can be specified), for image is the same, the DOM tree within the frame can not be accurately drawn; Because you want to draw a canvas diagram, browsers like IE8 need to use a third-party library such as Flashcanvas. This page can test each website to use it to screenshots the effect, the effect is quite good:     API Use Example:   Html2canvas (    [Dom1, Dom2],     {&nbs P       Logging:false,         Usecors:false,         Proxy:   False         onrendered:function (canvas) {           //canvas is drawing Canvas is the object        }    }); For this kind of relatively small class library, the document is very poor, including the definition of the API, need to read the source code, written quite clearly.   In addition, the site download package also has a jquery plug-in, the API to do a package, you can ignore.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.