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

Sample code for implementing 3D rotation effect using pure CSS

Mainly use the preserve-3d and perspective proper...

MySQL 5.5 installation and configuration graphic tutorial

Organize the MySQL 5.5 installation and configura...

Detailed explanation of mixed inheritance in Vue

Table of contents The effect of mixed inheritance...

How to use domestic image warehouse for Docker

1. Problem description Due to some reasons, the d...

Vue implements anchor positioning function

This article example shares the specific code of ...

Trash-Cli: Command-line Recycle Bin Tool on Linux

I believe everyone is familiar with the trashcan,...

MySQL database case sensitivity issue

In MySQL, databases correspond to directories wit...

Detailed explanation of CSS multiple three-column adaptive layout implementation

Preface In order to follow the conventional WEB l...

In-depth study of how to use positioning in CSS (summary)

Introduction to Positioning in CSS position attri...

Example code for using Nginx to implement 301 redirect to https root domain name

Based on SEO and security considerations, a 301 r...

Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)

Download and install JDK Step 1: First download t...

Why MySQL chooses Repeatable Read as the default isolation level

Table of contents Oracle Isolation Levels MySQL I...

Implementation of services in docker accessing host services

Table of contents 1. Scenario 2. Solution 3. Conc...

Detailed tutorial for downloading and installing mysql8.0.21

Official website address: https://www.mysql.com/ ...