2012-12-31 3 views
0

캔버스 div에있는 스크린 샷을 보여주는 html2canvas에 문제가 있습니다.html2canvas 변경 div

실제로 사진이

<div id="content"> </div> 

에 표시 될 것입니다하지만 난 내 캔버스 내가 사업부 컨테이너-ID를 변경할 수 있습니다 자바 스크립트 인라인에서

<div id="content"> 
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas> 
</div> 

의 코드를 보여주고 싶다,하지만 난 canvas 요소에서 이미지를 얻기 위해 코드를 변경하는 방법을 모른다.

<script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://urlcanvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#contentx").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#contentx").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#contentx").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script> 

답변

0

나는이 같은 캔버스에 추가 할 필요가 잘 이해하는 경우 :

html2canvas(document.getElementById("content"), { 
    onrendered: function(canvas) { 
    document.getElementById("content").appendChild(canvas); 
    } 
});