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

来源：互联网发布：mac git 忽略ds store 编辑：程序博客网时间：2024/06/06 17:54

引入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

1 0