截取部分网页以图片保存到本地

引入js文件

<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

样式添加

<style>
        a{
        display: block;
        border: 1px solid #ccc;
        width: 144px;
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        text-align: center;
        margin:10px auto;
    }
    #content {
        background: rgba(100, 255, 255, 0.5);
        padding: 50px 10px;
        width:482px;
        margin:0 auto;
    }
    #container,#content,h1{
        margin:0 auto;
        text-align: center;
    }
</style>

截取部分网页转化为图片，并保存到本地

//保存图片到本地
var saveFile = function (data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
/**
调用 html2canvas插件，将截取部分网页为canvas
#content 需要生成图片的片段
<a> 生成图片按钮 
生成图片格式.png
*/
document.querySelector("a").addEventListener("click", function () {
     html2canvas(document.querySelector("#content")
        ).then(function (canvas) {
            var type = "png";
            var image = canvas.toDataURL("image/png");
            // 下载后的图片命名格式
            var filename = 'down_' + (new Date()).getTime() + '.' + type;
            //下载图片
            saveFile(image, filename);
        });
    }, false);

html代码片段

<div style="width: 800px;margin-top: 140px;" id="container">
    <div>
        <h1>HTML content to render:</h1>
        <div id="content" >
            Render the content in this element
            <strong>only</strong>
            onto the existing canvas element
        </div>
    </div>
    <div ><a>Run html2canvas</a></div>
</div>

html2canvas官网主页：http://html2canvas.hertzen.com/
参考链接：http://blog.csdn.net/jia20003/article/details/8948005