Trying to capture a screenshot of the entire body of a page (including the fields filled in by user) in javascript, but html2canvas only captures the current window, even when I set the height to a huge number. The html2canvas website examples appear to have my desired functionality, but I'm not able to understand what they're doing differently.
<button id="pdfbutton" type="button">Click Me!</button>
<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
console.log(img);
document.body.appendChild(canvas);
}
// height: 10000
});
});
</script>
Please let me know if there are any other ways to capture a screenshot on a button click in javascript (without inserting a URL, because the user fills in fields on my page).
Solved this problem by removing style attribute (height, position) which does not support by html2canvas and adding it after capturing the screenshot. In my case I faced problem with position.
$('.element').css('position','initial'); // Change absolute to initial
$my_view = $('#my-view');
var useHeight = $('#my-view').prop('scrollHeight');
html2canvas($my_view[0], {
height: useHeight,
useCORS: true,
allowTaint: true,
proxy: "your proxy url",
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
var popup = window.open(imgSrc);
$('.element').css('position','absolute');
}
});
This will take screenshot of the whole screen including scrollable part. check this solution
Html2Canvas has an issue which forces it to render an element from the top window's boundary. You may consider scrolling to the top of the element.
The second issue is overflow handling. Set overflow: visible on the parent element and remove it after export.
Related
I can't understand, why mouse::move() doesn't work. For example on this page.
As you can see, there are 10 elements and after moving mouse cursor at the every picture you will see detailed information. I have a set of every element id. I want to move cursor on every element, then selector "div#hover_item_descriptors" will be updated and I will work with it. It's my code:
this.eachThen(ids, function(resp){
var id = resp.data;
this.then(function(){
this.mouse.move('span#' + id + '_name'); //moving at the name of element
});
this.waitUntilVisible('div#hover_item_descriptors div#sticker_info', function(){
// it`s never work, because moving doesn't work
});
});
Why does it not work?
I'd stumbled at this too, figured it out thanks to this issue: https://github.com/n1k0/casperjs/issues/208
It turns out if you are hovering cursor over an element that is not in the viewport, hover event won't work.
So, to make it work, set viewport height that is guaranteed to exceed page height, for example:
var casper = require('casper').create({
viewportSize : { width: 1280, height: 5000 }
});
I need to generate an image with a corner ribbon, which musn't be an image since the text inside it changes.
Once it's generated, I need the div (the image + the ribbon) to be saved as an image, but I'm not able to do it with html2canvas also because I don't have the images, I just have the link (and saving them would take too much time). Is there another method?
An answer to this similar question generated this interesting fiddle. I think that you could adapt this for your use.
It's essentually this javascript:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
I'm taking a screenshot of my webpage using the html2canvas plugin and it works really well.
However, one of the divs on the page can be zoomed, which seems to cause problems when the screenshot is taken.
This is the code which takes the screenshot.
function screenshot(fileName){
html2canvas(document.body, {
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/png");
var image = myImage.replace('data:image/png;base64','');
window.open(myImage);
}
});
Is there an easy way to update the dom so that when the div is zoomed, html2canvas takes a screenshot of the latest webpage, or is this not possible.
Does anybody have any experience of working with any other plugins which may be a good alternative?
Thanks for any help!
Try to write below lines of code just below your code to zoom div / image in javascript
html2canvas(document.body, {
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/png");
var image = myImage.replace('data:image/png;base64','');
window.open(myImage);
}
});
I have a page that includes a number of canvas elements each with its own shape (rec,line etc...) and also css3 properties (rotate,deg,transform etc...).
i need to take that html element or page and render it as an image file including all the child elements and their styling.
html2canvas.js has a lot of problems rendering css3 properties so that option is off the table.
and the elements i want to convert to an image are an array of html elements (div,canvas,p,video etc...) so a screenshot of a canvas element want do.
is there a solution for this problem???
i must convert it to an img i dont have any other alternative !!!
You can use PhantomJS for this.
Here is an example in node:
var page = require('webpage').create();
page.open('http://example.org/', function() {
var clipRect = page.evaluate(function () {
return document.getElementById('myID').getBoundingClientRect();
});
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('myCapture.png');
phantom.exit();
});
This will go to example.org and take a screenshot of everything inside #myID
As a quick explanation, I created an image that resizes to fill the background using this function which works great:
function resize_bg(element_id){
$("#"+element_id).css("left","0");
var doc_width = $(window).width();
var doc_height = $(window).height();
var image_width = $("#"+element_id).width();
var image_height = $("#"+element_id).height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
if(new_height<doc_height){
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
var width_offset = Math.round((new_width-doc_width)/2);
$("#"+element_id).css("left","-"+width_offset+"px");
}
$("#"+element_id).width(new_width);
$("#"+element_id).height(new_height);
return true;
}
So no problem for the full background image. The problem appears, when I change the image source using Javascript. In other words, I have 1 image set as background but on hover of certain elements on the page, the image changes but it doesn't change the resize right. So the first image on load is resized and positioned correctly, but when I switch the image using .attr('src',newimg) the image is not resized correctly even though I call the function again.
Here is the code I use to change the image and resize it:
$('#menu_work li a').hover(function(){
$('#content').hide();
var img_src = $(this).next('img').attr('src');
$('#full_screen_img').attr('src', img_src );
resize_bg();
$('#full_screen_img').show();
},function(){
$('#full_screen_img').hide();
$('#content').show();
});
Thanks for any help.
It appears that you have left out the element_id argument when calling resize_bg() in the hover event handler. As a result, resize_bg() can't find the element you want to resize.
#maxedison is right, you forgot to pass the element id.
Another problem is that when you change the src, the new image might not be loaded yet, so you won't get the right dimensions in resize_bg until it is.
In that case you'll need to resize the image once it's loaded:
$('#full_screen_img').attr('src', img_src ).load(function() {
resize_bg('<ELEMENT_ID>');
});
resize_bg('<ELEMENT_ID>');
On another note, I'd recommend you change resize_bg to get a jQuery object instead of an id, or even write a plugin ($.fn.resize_bg) if it's a functionality you want to use often.