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

最新推荐文章于 2021-08-06 01:43:39 发布

yu_wlong

最新推荐文章于 2021-08-06 01:43:39 发布

阅读量885

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/yu_wlong/article/details/107694459

版权

JS 专栏收录该内容

2 篇文章 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>