<!DOCTYPE html>
<html lang="en">
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript" >
$(document).ready( function(){
$(".example1").on("click", function(event) {
// var showObject = $("#showImages");
event.preventDefault();
html2canvas($("#showImages2"), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
debugger;
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
// document.getElementById("showImages");
$(".showImagesID").append(newImg);
}
});
});
});
</script>
</head>
<body>
Hello!
<div class="" style="background-color: #abc;">
计算机天堂测试html5页面截图
<br>jsjtt.com
</div>
<div id="showImages" style="background-color: #eabb00;width: 200px;height: 200px;">
<span style="color: #0000cc;size: A3">显示样式sdsdfdsf</span>
</div>
<div id="showImages2" style="background-color: #ea93db;width: 200px;height: 200px;">
<span style="color: #ff669c;size: A3">巩师傅师傅说</span>
</div>
<textArea id="textArea" col="20" rows="10" ></textArea>
<input class="example1" type="button" value="button">
生成界面如下：
<div class="showImagesID"></div>
</body>
</html>
实例代码含有解决截图不全问题：
function expWordZip(event){
// var showObject = $("#showImages");
event.preventDefault();
//$(".orgchart l2r")
//document.getElementsByClassName("claro")
//document.getElementById("chart-container")
//获取节点高度，后面为克隆节点设置高度。
// var imaNode = $("#chart-container");
//获取当前页面iframe中要渲染的最好节点div
var imaNode = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementById(imagePicId);
//获取图像有实际高度的节点div目的是获取所渲染图像的真实高度
var imaDom = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementsByClassName(imageDomClassName);
//js对象转换成jquery对象如下，为的是使用jquery方法，jquery对象转换成js对象是 js对象:jsDom = jqueryDom[0]
var imaDomJs = $(imaDom);
var imageNodeJs = $(imaNode);
var imageNodeJsHeight = imageNodeJs.height();
var imageNodeJsWidth = imageNodeJs.width();
//克隆节点，默认为false，不复制方法属性，为true是全部复制。
var copyDom = imageNodeJs.clone(true);
//设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
//copyDom.width(imageNodeJs.width() + "px");
//设置渲染图像的真实高度，不适用复制直接改变元素的高度
copyDom.width(imaDomJs.outerHeight(true) + "px");
copyDom.height(imaDomJs.outerWidth(true) + "px");
copyDom.css({"background": "white"});
//将克隆节点动态追加到body后面。
$("body").append(copyDom);
html2canvas(copyDom, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL();
//var newImg = document.createElement("img");
//newImg.src = dataUrl;
// document.getElementById("showImages");
//document.body.appendChild(newImg);
copyDom.remove();
if(dataUrl){
$.ajax(
{
type : "post",
url : ctx+fileDisposeUrl,
data: {"ajbh":ajbh,"imageCode":dataUrl},
success : function (result){
var resultData = JSON.parse(result);
//alert(resultData.msg);
var address = resultData.address;
var fileWordName = resultData.fileWordName;
var url = ctx+fileDownloadUrl+fileWordName;
var method = "post";
downWordFile(url, method, address, fileWordName);
}
});
}
}
});
}
function downWordFile(url, method, address, fileWordName){
debugger;
$('<form action="'+url+'" method="'+(method||'post')+'">' + // action请求路径及推送方法
'<input type="hidden" name="address" value="'+address+'"/>' + // 文件路径
'<input type="hidden" name="fileWordName" value="'+fileWordName+'"/>' + // 文件名称
'</form>').appendTo($("body")).submit().remove();
}
克隆后设置属性恢复
