对html进行截图并保存为本地图片

程序员文章站 2022-05-02 23:46:09

参考：http://blog.csdn.net/luckyJieXu/article/details/72137147，https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL， ......

<!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截图
            // 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);
            });

            //判断浏览器类型
            function mybrowser() {
                var useragent = navigator.useragent; //取得浏览器的useragent字符串
                var isopera = useragent.indexof("opera") > -1;
                if(isopera) {
                    return "opera"
                }; //判断是否opera浏览器
                if(useragent.indexof("firefox") > -1) {
                    return "ff";
                } //判断是否firefox浏览器
                if(useragent.indexof("chrome") > -1) {
                    return "chrome";
                }
                if(useragent.indexof("safari") > -1) {
                    return "safari";
                } //判断是否safari浏览器
                if(useragent.indexof("compatible") > -1 && useragent.indexof("msie") > -1 && !isopera) {
                    return "ie";
                }; //判断是否ie浏览器
                if(useragent.indexof("trident") > -1) {
                    return "edge";
                } //判断是否edge浏览器
            }

            //ie浏览器图片保存本地
            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未实现
            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>

参考：http://blog.csdn.net/luckyjiexu/article/details/72137147，https://developer.mozilla.org/zh-cn/docs/web/api/htmlcanvaselement/todataurl，

上一篇： SpringBoot SpEL表达式注入漏洞-分析与复现

下一篇：孙悟空写给白骨精的绝世情书