Implementation code for taking screenshots using HTML and saving them as local images

Implementation code for taking screenshots using HTML and saving them as local images

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);
            });
            //Determine the browser type function myBrowser() {
                var userAgent = navigator.userAgent; //Get the browser's userAgent string var isOpera = userAgent.indexOf("Opera") > -1;
                if(isOpera) {
                    return "Opera"
                }; //Judge whether it is Opera browser if(userAgent.indexOf("Firefox") > -1) {
                    return "FF";
                } //Judge whether it is Firefox browser if(userAgent.indexOf("Chrome") > -1) {
                    return "Chrome";
                }
                if (userAgent.indexOf("Safari") > -1) {
                    return "Safari";
                } // Determine whether it is Safari browser if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    return "IE";
                }; //Judge whether it is IE browser if(userAgent.indexOf("Trident") > -1) {
                    return "Edge";
                } //Determine whether it is Edge browser}
            //IE browser saves the picture 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();
            }
            // chrome14+,firefox20+,pera15+,Edge 13+,Safari do not implement 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>

Summarize

The above is the implementation code that I introduced to you for using HTML screenshots and saving them as local images. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Install MySQL5.5 database in CentOS7 environment

>>:  Sample code of uniapp vue and nvue carousel components

Recommend

Instructions for recovering data after accidental deletion of MySQL database

In daily operation and maintenance work, backup o...

Vue+express+Socket realizes chat function

This article shares the specific code of Vue+expr...

Implementation of Nginx hot deployment

Table of contents Semaphore Nginx hot deployment ...

Several ways to update batches in MySQL

Typically, we use the following SQL statement to ...

In-depth explanation of Mysql deadlock viewing and deadlock removal

Preface I encountered a Mysql deadlock problem so...

Nodejs plug-in and usage summary

The operating environment of this tutorial: Windo...

Mysql sorting to get ranking example code

The code looks like this: SELECT @i:=@i+1 rowNum,...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Commonly used English fonts for web page creation

Arial Arial is a sans-serif TrueType font distribu...

Complete steps for uninstalling MySQL database

The process of completely uninstalling the MySQL ...

How to encapsulate WangEditor rich text component in Angular

The rich text component is a very commonly used c...

Summary of xhtml block level tags

* address - address * blockquote - block quote * c...

MySql import CSV file or tab-delimited file

Sometimes we need to import some data from anothe...

Detailed explanation of the correct way to open em in CSS

Why do we say “usually 1em=16px”? The default tex...

Summary of Problems in Installing MySQL 5.7.19 under Linux

The first time I installed MySQL on my virtual ma...