$(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);
}
});
});
});
Hello!
计算机天堂测试html5页面截图
jsjtt.com
显示样式sdsdfdsf
巩师傅师傅说
生成界面如下：
实例代码含有解决截图不全问题：
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;
$('
').appendTo($("body")).submit().remove();}
克隆后设置属性恢复