通过按钮截取当前网页成png或jpeg格式的图片并保存

最新推荐文章于 2021-03-10 02:30:49 发布

weixin_30430169

最新推荐文章于 2021-03-10 02:30:49 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/johnny-cli/p/8004512.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"/>
    <script type="text/javascript" src="html2canvas.js"/>
</head>
<body>
<a id="down_load_hidden" target="blank" style="display: none;"></a>

<a id="down_button" href="javascript:void(0)" οnclick="domShot('qqCont')">保存当前页</a>
<div id="qqCont" class="qqCont">
    需要截图的样式
</div>

<script>
    /**
     * 调用html2canvas框架进行截图下载功能
     * @param domId 容器Id
     * author Levin
     */
    function domShot(domId) {
        //0.5.0-beta4方法
        html2canvas(document.querySelector("#" + domId), {
            allowTaint: true,
            height: $("#" + domId).outerHeight() + 20
        }).then(function (canvas) {
            var timestamp = Date.parse(new Date());
            $('#down_button').attr('href', canvas.toDataURL());
            $('#down_button').attr('download', timestamp + '.png');
            var fileObj = document.getElementById("down_load_hidden");
            fileObj.click();
        });
    }
</script>

//一般情况html2canvas.js中的截取部分不支持取全部截取 所以要将页面所有部分截取得 修改html2canvas.js中的一下部分
 //未修改前

<script>
    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });
</script>

//修改后

<script>
//添加自定设置宽度高度
    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
        * *

        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });
</script>