Crop Part Of The Page

Question

To take a screenshot, I want to select a specific part / element of the page (specified using the CSS selector).

How can i do this?

I think this may be possible by wrapping the page in or in an IFrame, but I don't know how to proceed.

I would like to avoid page reloading.

edit I actually solved this using another method: I crop the part using PHP after getting the coordinates of the element in Javascript: https://gist.github.com/amenk/11208415

Answer 1

JSFIDDLE WORKING -NO IE -

http://jsfiddle.net/8Rx34/: , "box1" "box2" "box3" "box4" "box5"

, , . myScreenshot.

myScreenshot css:

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

dom ( ) , .

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

   > * {     display: none;   }

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

, css, js , , .

$(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');
     }
});