<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)" onclick="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>
</body></html>
时间： 2024-10-08 18:41:29