如何使用javascript截取div的截图？

比方说，我有一个带图像源的div

 
With custom CSS
   

点击按钮我需要在另一个div中打开此图像屏幕

你能说出采取该图像屏幕截图的步骤吗？

Answer 1

假设您要在其他div显示image 。

HTML：

 
  
 
 
 Click 

使用Javascript：

 $('#myButton').on('click', function() { $('#copy').html($('#main').html()); }); 

演示： https ： //jsfiddle.net/tusharj/uapf99nt/

Answer 2

您无需拍摄任何屏幕截图。 图像已加载，因此您可以再次显示相同的图像：

HTML

CSS

 #secondDiv { display:none } 

jQuery的

 $(document).on('click', '#button', function() { var img = $('#originalDiv > img').attr('src'); $('#secondDiv > img').attr('src', img).show(); }); 

Answer 3

看这里。 它试图将dom的一部分渲染成图像

http://html2canvas.hertzen.com/

Answer 4

查看此链接以截取屏幕截图..

 $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); canvas.toBlob(function(blob) { saveAs(blob, "Dashboard.png"); }); } }); }); });