Use HTML screenshots and save the implementation code for this map

Time:2019-3-10

The specific code is as follows:
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html2canvas_download</title>
        <style>
            a {
                cursor: pointer;
                color: rgb(85, 26, 139);
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id="oDiv" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;">
            <h1>hello world!</h1>
        </div>
        <!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> -->
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
        <script type="text/javascript">
            var oDiv = document.getElementById('oDiv');
            // Body screenshot
            // html2canvas(document.body).then(function(canvas) {
            //     document.body.appendChild(canvas);
            // });
            html2canvas(oDiv).then(function(canvas) {
                document.body.appendChild(canvas);
                var oCavans = document.getElementsByTagName('canvas')[0];
                var strDataURI = oCavans.toDataURL();
                downLoadFn(strDataURI);
            });
            // Judging Browser Type
            function myBrowser() {
                Var userAgent = navigator. userAgent; // Gets the userAgent string of the browser
                var isOpera = userAgent.indexOf("Opera") > -1;
                if(isOpera) {
                    return "Opera"
                }; // Judge Opera Browser
                if(userAgent.indexOf("Firefox") > -1) {
                    return "FF";
                }// Determine whether Firefox browsers are available
                if(userAgent.indexOf("Chrome") > -1) {
                    return "Chrome";
                }
                if(userAgent.indexOf("Safari") > -1) {
                    return "Safari";
                }// Determine whether Safari browser is available
                if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    return "IE";
                } // Determine whether IE browser is available or not
                if(userAgent.indexOf("Trident") > -1) {
                    return "Edge";
                }// Judging Edge Browser
            }
            // IE Browser Pictures Save Locally
            function SaveAs5(imgURL) {
                var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
                for(; oPop.document.readyState != "complete";) {
                    if(oPop.document.readyState == "complete") break;
                }
                oPop.document.execCommand("SaveAs");
                oPop.close();
            }
            // chrome 14+, Firefox 20+, Pera 15+, Edge 13+, Safari not implemented
            function download(strDataURI) {
                var link = document.createElement('a');
                link.innerHTML = 'download_canvas_image';
                link.download = 'mypainting.png';
                link.addEventListener('click', function(ev) {
                    link.href = strDataURI;
                }, false);
                document.body.appendChild(link);
            };
            function downLoadFn(url) {
                if(myBrowser() === "IE" || myBrowser() === "Edge") {
                    SaveAs5(url);
                } else {
                    download(url);
                }
            }
        </script>
    </body>
</html>

summary

Above is the implementation code of HTML screenshots and saved for this map. I hope it will be helpful to you. If you have any questions, please leave a message for me, and the editor will reply to you in time. Thank you very much for your support to developpaer.

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]