Home > Developer > JavaScript
Javascript saves the webpage as an image by using the html2canvas library, canvasxpress
Step 1: Save the web page as a Canvas, with the help of html2canvas library, http://html2canvas.hertzen.com/
Html2canvas (document. getElementById ("id1"), {onrendered: function (canvas) {document. getElementById ("id2 "). appendChild (canvas); // how to deal with the canvas after it is generated. Of course, you can open it in a new label, display it on the floating layer, etc.}, canvas_id: 'canvas '// Add the canvas id by modifying the html2canvas source code });
Note: The first parameter of html2canvas () is the area of the canvas to be generated. If the canvas is generated for the entire webpage, It is document. body. For details about the second parameter, refer to the settings of canvas attributes on the official website. Of course, you can add attributes you want to modify the source code, such as adding IDs to canvas.
Step 2: Save the canvas generated in step 1 as an image
Var canvas = document. getElementById ("<span style =" font-family: Arial, Helvetica, sans-serif; "> canvas" </span> <span style = "font-family: Arial, helvetica, sans-serif; ">), </span> url = canvas. toDataURL (); // the following code downloads the image function var triggerDownload =$ ("<a> "). attr ("href", url ). attr ("download", "img.png "). appendTo ("body"); triggerDownload [0]. click (); triggerDownload. remove ();
Here we can focus on the toDataURL () method. We can convert the canvas to an image url in the form of data, and assign this url to the label to display the image, the other part of the code is the download function that you need.
There is no problem when the JS Code is saved, but sometimes ajax is used in the background to dynamically fill data or change data. Such data only exists in the memory of the browser, it cannot be saved to a local hard disk.
Use JavaScript to click an image on an HTML webpage to obtain the image connection and store the connection in hidden.
<Html>
<Head>
</Head>
<Body>
<Input type = "hidden" id = "hidd" value = ""/>
</Body>
</Html>
<Script language = javascript>
Function ImgOnClick (){
// Alert (this. src );
Document. getElementById ("hidd"). value = this. src;
Window. open (this. src );
}
Var imgs = document. images;
For (var I = 0; I {
Imgs [I]. onclick = ImgOnClick;
}
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
