文章/答案/技术大牛

发布

社区首页 >问答首页 >html2canvas更改div

问html2canvas更改div
EN

Stack Overflow用户

提问于 2012-12-31 23:35:36

回答 2查看 3.1K关注 0票数 0

我对html2canvas在canvas div中显示屏幕截图有问题。

实际上，这张照片将在

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

但我喜欢在画布上展示代码

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

在内联javascript中，我可以更改div container-id，但我不知道如何更改代码以获得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>

image

html

save

html2canvas

回答 2

Stack Overflow用户

发布于 2012-12-31 23:43:01

这是一个很好的参考，create screenshot of webpage using html2canvas (unable to initialize properly)希望它能对你有所帮助。

票数 0

Stack Overflow用户

发布于 2017-11-28 22:53:30

如果我理解得很好，你需要像这样添加画布：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14103409

复制

相似问题

问html2canvas更改div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html2canvas更改divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html2canvas更改div
EN