Question

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

<div>
<p class="row">With custom CSS</p>
<img src="/images/midhun.jpg">
</div>

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

您能告诉采取该图像截屏的步骤

Answer 1

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

HTML：

<div id="main">
    <img src="https://lh5.googleusercontent.com/-XOGfvAHr7HQ/UvoUItkZMZI/AAAAAAAAHJk/IJz5JcUB9dw/w520-h274-no/scopes_in_directives.png" />
</div>
<div id="copy">
</div>
<button id="myButton">Click</button>

使用Javascript：

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

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

Answer 2

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

HTML

<div id="originalDiv">
   <img src="/images/midhun.jpg">
</div>
<div id="secondDiv">
   <img src="" />
</div>

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

选中此link以截取屏幕截图..

$(function() { 
$("#btnSave").click(function() { 
    html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            canvas.toBlob(function(blob) {
                saveAs(blob, "Dashboard.png"); 
            });
        }
    });
});
});

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

4 个答案: