JSFIDDLE WORKING -NO IE -

Question

为了拍摄截图，我想隔离页面的特定部分/元素（使用CSS选择器指定）。

我该怎么做？

我认为这可能是通过将页面包装成一个或一个IFrame但不知道如何继续来实现的。

我想避免重新加载页面。

修改我实际上用另一种方式解决了这个问题 - 在Javascript中获取元素坐标后使用PHP裁剪出部分：https://gist.github.com/amenk/11208415

Answer 1

JSFIDDLE WORKING -NO IE -

http://jsfiddle.net/8Rx34/：在页面中使用id，在此测试用例＆＃34; box1＆＃34;或＆＃34; box2＆＃34;或＆＃34; box3＆＃34;或＆＃34; box4＆＃34;或＆＃34; box5＆＃34;

测试有点似乎没问题。想知道获取元素ID并应用myScreenshot类。

myScreenshot css代码：

.myScreenshot {
 position: absolute;
 left:0px;
 top: 0px;
}

然后将选定的dom元素（与他的孩子一起）复制为身体的第一个元素。

$('body').prepend($('#myIdElementToCrop'));

在体＆GT; * { display：none; }

.myScreenshot:first-child{
  display: initial !important;
}

让所有工作正常，所有必须以css中的隐藏元素开始，并且必须捕获元素的宽度以将其应用于元素的副本，以便每次都显示正确的宽度。

$(function() {
     var idOfDom = prompt("Insert ID of DOMElement to apply myScreenshot");
     if ($('#'+idOfDom).length > 0){
         var actualWidth = $('#'+idOfDom).width();
        $('body').prepend($('#'+idOfDom));
        $('#'+idOfDom).addClass("myScreenshot").css('width',actualWidth);
        $('body>*').css('display', 'none').css('visibility','visible');
     }
});

裁剪页面的一部分

1 个答案:

JSFIDDLE WORKING -NO IE -