截取屏幕作为图片Html2Canvas

深碍√TFBOYSˉ_ 2023-10-11 09:57 24阅读 0赞

## **（1）Html2Canvas** ##

说明：**这是一个关于截取屏幕作为图片的插件**

附上我在PC端测试的代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>html2Canvas截屏</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        
        <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
        <style>
            a {
                cursor: pointer;
                color: rgb(85, 26, 139);
                text-decoration: underline;
            }
            #content{
                background: -webkit-linear-gradient(left top, #4bb0ff, #6149f6); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(bottom right, #4bb0ff, #6149f6); /* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(bottom right, #4bb0ff, #6149f6); /* Firefox 3.6 - 15 */
                background: linear-gradient(to bottom right, #4bb0ff, #6149f6); /* 标准的语法 */
                width: 300px;
                height: 300px;
                display: flex;
                cursor: pointer;
                margin: 17% auto;
                border-radius: 8px;
                align-items: center;
            }
            h1{
                text-align: center;
                margin: auto;
                color: #6149f6;
            }
            canvas#mycanvas {
                display: flex;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div id="content"><h1>点我截屏保存图片</h1></div>
        <script>
            $("#content").on("click", function (event) {
                event.preventDefault();
                var userAgent = navigator.userAgent;
                var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
                html2canvas($('#content'), {
                    allowTaint: true,
                    taintTest: false,
                    useCORS: true,//火狐浏览器添加项
                    onrendered: function (canvas) {
    
                        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        var userAgent = navigator.userAgent;
                        //判断是否是IE11
                        // debugger
                        if (-1 !== userAgent.indexOf("Trident")) {
                            var arr = image.split(',');
                            var mime = arr[0].match(/:(.*?);/)[1];
                            var bstr = atob(arr[1]);
                            var n = bstr.length;
                            var u8arr = new Uint8Array(n);
                            while (n--) {
                                u8arr[n] = bstr.charCodeAt(n);
                            }
                            window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
                        } else {
                            canvas.id = "mycanvas";
                            //生成base64图片数据
                            // var dataUrl = canvas.toDataURL();
                            var dataUrl = canvas.toDataURL('image/jpeg', 1.0)
                            var newImg = document.createElement("img");
                            newImg.src = dataUrl;
                            var a = $("<a></a>").attr("href", dataUrl).attr("download", new Date().getTime() + ".png");
                            $("body").append(a);//火狐浏览器添加项
                            a[0].click();
                            a.remove();
                        }
                        document.body.appendChild(canvas)
                    }
                });
            });
        </script>
    </body>
    </html>

> \*\*

## 另外一种只截屏不保存图片 ##

\*\*

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html2Canvas截图</title>
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
        <style>
            #content{
                width: 500px;
                height: 700px;
                background: url(timg.jpg) no-repeat;
                background-size: cover; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <input type="button" value="截图" onclick="takeScreenshot()">
        </div>
        <script type="text/javascript">
            function takeScreenshot() {
                html2canvas(document.getElementById('content'), {
                    taintTest: true,
                    onrendered: function(canvas) {
                        document.body.appendChild(canvas)
                    },
                    width: document.documentElement.clientWidth || document.body.clientWidth,
                    height: document.documentElement.clientHeight || document.body.clientHeight
                })
            }
        </script>
    </body>
    </html>