How to make a screenshot of an embedded iframe

Question

I want to have a function that make a snapshot of the iframe and append to the other area of the webpage. The codes should look like:

Html:

<iframe src="http://edition.cnn.com/video"></iframe>
<button id="btn_screenShot" name="screenShot">Grab a image</button>
<div id="screenShot-result"></div>

JS:

function screenShot(iframe) {
   //what can I do here?
   //transform the page in <iframe> to a image type, jpeg,png or any other!
}

$('#btn_screenShot').click(function(){
   var imgPath = screenShot(document.getElementByTagName('iframe'));
   $('#screenShot-result').append("<img src=\"+ imgPath +\">");
});

First, it doesn't work with html2canvas, like the limitation described. Is there any other javascript or jquery plugin to realize the function? or is it possible to work like the print-screen button on the keyboard?