<!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圖片數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? 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;">
? ? 計(jì)算機(jī)天堂測(cè)試html5頁(yè)面截圖
? ? <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>
實(shí)例代碼含有解決截圖不全問題：
function expWordZip(event){
? ? // var showObject = $("#showImages");
? ? event.preventDefault();
? ? //$(".orgchart l2r")
? ? //document.getElementsByClassName("claro")
? ? //document.getElementById("chart-container")
? ? //獲取節(jié)點(diǎn)高度历极，后面為克隆節(jié)點(diǎn)設(shè)置高度秦叛。
? ? //? ? var imaNode = $("#chart-container");
? ? //獲取當(dāng)前頁(yè)面iframe中要渲染的最好節(jié)點(diǎn)div
? ? var imaNode = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementById(imagePicId);
? ? //獲取圖像有實(shí)際高度的節(jié)點(diǎn)div目的是獲取所渲染圖像的真實(shí)高度
? ? var imaDom = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementsByClassName(imageDomClassName);
? ? //js對(duì)象轉(zhuǎn)換成jquery對(duì)象如下偎蘸，為的是使用jquery方法丹擎，jquery對(duì)象轉(zhuǎn)換成js對(duì)象是 js對(duì)象:jsDom = jqueryDom[0]
? ? var imaDomJs = $(imaDom);
? ? var imageNodeJs = $(imaNode);
? ? var imageNodeJsHeight =? imageNodeJs.height();
? ? var imageNodeJsWidth = imageNodeJs.width();
? ? //克隆節(jié)點(diǎn)，默認(rèn)為false甚亭，不復(fù)制方法屬性弓候，為true是全部復(fù)制。
? ? var copyDom = imageNodeJs.clone(true);
? ? //設(shè)置克隆節(jié)點(diǎn)的css屬性藏斩，因?yàn)橹暗膶蛹?jí)為0躏结，我們只需要比被克隆的節(jié)點(diǎn)層級(jí)低即可。
? ? //copyDom.width(imageNodeJs.width() + "px");
? ? //設(shè)置渲染圖像的真實(shí)高度狰域，不適用復(fù)制直接改變?cè)氐母叨?/p>
? ? copyDom.width(imaDomJs.outerHeight(true) + "px");
? ? copyDom.height(imaDomJs.outerWidth(true) + "px");
? ? copyDom.css({"background": "white"});
? ? //將克隆節(jié)點(diǎn)動(dòng)態(tài)追加到body后面媳拴。
? ? $("body").append(copyDom);
? ? html2canvas(copyDom, {
? ? ? ? allowTaint: true,
? ? ? ? taintTest: false,
? ? ? ? onrendered: function(canvas) {
? ? ? ? ? ? canvas.id = "mycanvas";
? ? ? ? ? ? //生成base64圖片數(shù)據(jù)
? ? ? ? ? ? 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請(qǐng)求路徑及推送方法
? ? ? ? ? ? ? ? '<input type="hidden" name="address" value="'+address+'"/>' + // 文件路徑
? ? ? ? ? ? ? ? '<input type="hidden" name="fileWordName" value="'+fileWordName+'"/>' + // 文件名稱
? ? ? ? ? ? '</form>').appendTo($("body")).submit().remove();
}
克隆后設(shè)置屬性恢復(fù)
