html2canvas实现页面截图存储为图片然后保存到服务器

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:47   1647   0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="html2canvas.js"></script>
    </head>
    <body>
        <div id="view"></div>
    </body>
    <script type="text/javascript">
        $(function() {
            var copyDom = $("#view")[0];
            var width = copyDom.clientWidth; //dom宽
            var height = copyDom.clientHeight; //dom高
            var scale = 2; //放大倍数
            html2canvas(document.querySelector("#view"), {
                dpi: window.devicePixelRatio * 2,
                scale: scale,
                width: width,
                heigth: height,
            }).then(function(canvas) {
                var myImage = canvas.toDataURL("image/jpeg"); //并将图片上传到服务器用作图片分享
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    contentType: "application/x-www-form-urlencoded",
                    url: "",
                    timeout: 60000, //超时时间设置,单位毫秒
                    data: {
                        viewimg: myImage
                    },
                    success: function(data) {

                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown, data) {

                    }
                });
            });
        });
    </script>
</html>
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP