JS 页面截屏，转为图片

一.引用js脚本包,html2canvas.js为截图包，使用非常简单

二.要保存的html元素

<body>
    <div id="header"></div>

    <div id="main">
        <div id="sharecontent">
            <div id="sharedownload">
                <img src="/@ViewBag.BackImg" />
            </div>
            <div id="shareqrcode">
                <div>
                    <img src="/@ViewBag.RQcode" />
                    <p>@@<span>@(ViewBag.agentName)的大V号主页</span></p>
                    <p>MB:@ViewBag.Phone</p>
                </div>
            </div>
        </div>
        <div id="previewImage" style="display:none;"></div>
    </div>

    <div id="footer"></div>
</body>

三.js代码

  　　　　var element = $("#sharecontent"); //要截图的div
        var getCanvas;
        $("#SaveDownload").click(function () //点击"保存下载控件"
        { 
            //newName,保存图片的新名称，防止重复
            var newName = new Date().getTime().toString(16) + Math.ceil(Math.random() * 10000).toString(16);
            html2canvas(element, {
                onrendered: function (canvas) {
                    //$("#previewImage").append(canvas); //可以，追加到界面上预览
                    //getCanvas = canvas;
                    var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片

                    //下面的代码是，给a标签的href链接图片地址，然后下载
                    var newData = imgageData.replace(/^data:image/png/, "data:application/octet-stream");
                    $("#btn-SaveDownload").attr("download", newName+".png").attr("href", newData);
                    $("#btn-SaveDownload")[0].click();
                }
            });
        })

转载：http://www.webkaka.com/tutorial/html/2019/030747/

相关阅读:
Flask 应用上下文
request 的介绍使用属性
Session 常见操作
cookie 常用操作
Python三大web框架简单介绍
Flask 入门
类与类之间的关系
request、response 中文乱码问题与解决方式
JAVA笔记
MySQL导入大sql 文件大小限制问题的解决

原文地址：https://www.cnblogs.com/liuzheng0612/p/11974929.html