html2canvas 更改 div
Posted
技术标签:
【中文标题】html2canvas 更改 div【英文标题】：html2canvas change div 【发布时间】：2012-12-31 15:35:35 【问题描述】：html2canvas 在画布 div 中显示屏幕截图时遇到问题。
其实图片会显示在
<div id="content"> </div>
但我喜欢在我的画布中显示代码
<div id="content">
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas>
</div>
在内联 javascript 中，我可以更改 div 容器 ID，但我不知道如何更改代码以获取画布元素中的图像。
<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>
【问题讨论】：
【参考方案1】：这是一个很好的参考create screenshot of webpage using html2canvas (unable to initialize properly)希望它会有所帮助。
【讨论】：
我测试了该站点的所有源代码组件，但没有成功【参考方案2】：如果我理解得很好，您需要像这样附加画布：
html2canvas(document.getElementById("content"),
onrendered: function(canvas)
document.getElementById("content").appendChild(canvas);
);
【讨论】：
以上是关于html2canvas 更改 div的主要内容，如果未能解决你的问题，请参考以下文章