Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to achieve page screenshot in html5" is not quite understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve page screenshot in html5" article.

First, import html2canvas.js

You can also import links directly:

Use is also very simple, specific API can go to the Internet to find, generate png pictures to use "image/png".

Where $("# xxx") is the div you want to intercept, which can be obtained through jquery, as well as document.

Html2canvas ($("# xxx"), {onrendered: function (canvas) {var url = canvas.toDataURL ("image/png"); _ window.location.href = url;}})

For other types of pictures, such as jpg, image/jpeg, etc., you can query API by yourself.

In fact, the simple screenshot has been completed here, if the interface is a little more complex, there may be a variety of pits, the following one to solve.

Second, the problem that svg cannot intercept

When we intercept a div, if there is a svg tag in the div, it is generally impossible to intercept. For example, if we intercept a flow chart, the result is as follows:

As you can see, the line of the flowchart is not intercepted, that is, the svg is not intercepted. The solution is to convert svg to canvas and then take a screenshot, directly on the code.

The each loop here loops through all the svg tags, converting them all to canvas:

If (typeof html2canvas! = = 'undefined') {/ / the following is the processing of svg var nodesToRecover = []; var nodesToRemove = []; var svgElem = cloneDom.find (' svg'); svgElem.each (function (index, node) {var parentNode = node [XSS _ clean]; var svg = node.outerHTML.trim (); var canvas = document.createElement ('canvas') Canvas.width = 650; canvas.height = 798; canvg (canvas, svg); if (node.style.position) {canvas.style.position + = node.style.position; canvas.style.left + = node.style.left; canvas.style.top + = node.style.top } nodesToRecover.push ({parent: parentNode, child: node}); parentNode.removeChild (node); nodesToRemove.push ({parent: parentNode, child: canvas}); parentNode.appendChild (canvas);}) }

Here you need to use canvg.js and its dependent file rgbcolor.js, which can be downloaded or imported directly from the Internet.

Third, the problem of background transparency

This is actually very simple, because it is transparent by default. The background color can be added with a parameter background in html2canvas, as follows:

Html2canvas (cloneDom, {onrendered: function (canvas) {var url = canvas.toDataURL ("image/png")}, background: "# fafafa"})

IV. The problem that only the visual part can be intercepted

If the div to be intercepted exceeds the interface, you may encounter the problem of incomplete interception, as shown in the figure above, only half of the content is hidden, because the invisible part is hidden, and html2canvas cannot intercept the hidden dom.

Therefore, the solution is to use cloning and put a copy of the part to be intercepted at the bottom of the page, then use html2canvas to intercept the complete div, and then remove this part of the content after the interception is completed. The complete code is as follows:

Function showQRCode () {scrollTo (0,0); / / Clone node, default is false, that is, do not copy method attributes, true is copy all. Var cloneDom = $("# D1") .clone (true); / / set the z-index attribute of the cloned node, as long as it is lower than the cloned node level. CloneDom.css ({"background-color": "# fafafa", "position": "absolute", "top": "0px", "z-index": "- 1", "height": 798, "width": 650}); if (typeof html2canvas! = = 'undefined') {/ / below is the processing of svg var nodesToRecover = [] Var nodesToRemove = []; var svgElem = cloneDom.find ('svg'); / / divReport is the id svgElem.each of dom (function (index, node) {var parentNode = node [XSS _ clean]; var svg = node.outerHTML.trim (); var canvas = document.createElement (' canvas'); canvas.width = 650; canvas.height = 798) Canvg (canvas, svg); if (node.style.position) {canvas.style.position + = node.style.position; canvas.style.left + = node.style.left; canvas.style.top + = node.style.top } nodesToRecover.push ({parent: parentNode, child: node}); parentNode.removeChild (node); nodesToRemove.push ({parent: parentNode, child: canvas}); parentNode.appendChild (canvas);}) / / dynamically append the clone node to the body. $("body") .append (cloneDom); html2canvas (cloneDom, {onrendered: function (canvas) {var url = canvas.toDataURL ("image/png"); _ window.location.href = url; cloneDom.remove (); / / clear the contents of the clone}, background: "# fafafa"}) }}

Here, first of all, we will intercept a copy of the div clone, and set the z-index to the minimum to avoid causing unsightly interface, then we will deal with the svg, which has been analyzed above, and finally append the clone node to the body.

In onrendered, we can directly use location.href to jump to view pictures, we can save them, or we can write url to the src of img and display it on the interface, such as $('# imgId'). Attr ('src',url)

Finally, you can display the image you just captured on the interface:

5. Upload the picture and save it to the database, and get the picture to display in the interface.

Now that you have the url, you need to upload it to the backend, save it to the database, and load the image in another interface shown. I am generally used to using url to store image paths instead of using blob.

Because I need to get the image in another interface, I store the image in a resource directory at the same level as webapp. The code is as follows:

/ / store the picture and return the image path BASE64Decoder decoder = new BASE64Decoder (); byte [] b = decoder.decodeBuffer (product.getProPic (). Substring (_ "data:image/png;base64," .length ()); ByteArrayInputStream bais = new ByteArrayInputStream (b); BufferedImage bi1 = ImageIO.read (bais) String url = "user_resource" + File.separator + "img" + File.separator + "product_" + UUID.randomUUID (). ToString (). Replace ("-", ") +" .png "; String totalUrl = System.getProperty (" root ") + url; File w2 = new File (totalUrl); ImageIO.write (bi1," png ", w2); product.setProPic (url) / / store the relative path of the picture in the database int res = productMapper.insertSelective (product); / / add to the database

Only part of the code is put here because other logic is involved.

Here, BASE64Decoder is used to store the image. After we get the image, we need to use substring to truncate the content of _ "data:image/png;base64," because the url, url.substring (_ "data:image/png;base64," .length ()) of the image is followed by ",".

For the path, the url in the above code is the content I stored in the database, and totalUrl is the real path stored during the actual write operation of ImageIO. The root directory of the project obtained by the getProperty () method can be configured in web.xml as follows, and then System.getProperty ("root").

WebAppRootKey root org.springframework.web.util.WebAppRootListener

Now the url of the image is stored in the database, and the image itself is stored in this directory of the project under tomcat.

Finally, get it on the interface outside, just add the project name before the current url.

.

The above is about the content of this article on "how to achieve page screenshots in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.