Develop Reference

Is there a way to print out a specific div of a webpage as pdf?

I want to be able to print out a specific div as a PDF and JPG. I used the following code while running phantomjs:
var bb = page.evaluate(function() {
return document.getElementsByTagName("fieldset")[7].getBoundingClientRect();
});
page.clipRect = {
top: bb.top,
left: bb.left,
width: bb.width,
height: bb.height
};
This works fine for PNG but for PDF it just prints the whole page. Does anyone know why this is happening and how to solve it? If someone know of any other way to solve this, even something not involving phantomjs or some fronted solution, I'll be highly obliged if they share.
Edit I'm looking for a workaround to this problem, any frontend or backend solutions are acceptable.However some of the previous questions regarding this topic provide suggestions that involve html2canvas or jsPdf but those have problems with resolution so any other answers solutions will be appreciated.

I needeed to send div to PDF, I use this code and work fine for me. (need JQuery).
function testPdf(){
//send the div to PDF
html2canvas($("#DIV_ID_HERE"), { // DIV ID HERE
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PDF', 10, 10);
doc.save('sample-file.pdf'); //SAVE PDF FILE
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="DIV_ID_HERE">
Test - This div to pdf
<br><input type="button" value="print" onclick="testPdf();">
<div>

html2canvas: image look blurred on firefox

I'm using html2canvas library to generate images from a specific div with informations inserted by users
$('#generate').on('click', function(event){
event.preventDefault();
var x=document.getElementById("signature");
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').fadeIn(200).attr('src', data);
});
});
On Windows Chrome, the generated canvas look fine. But on Firefox, the logo image and html text inside canvas look so blurred.
UPDATE
If I change var x by document.body, the canvas look better. But I need just the specific div.

Chained methods can be messy when one of them is asychronous. Try this:
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').attr('src', data);
$('#image').fadeIn(200);
});

Have also experienced this problem: solved by disabling the image smoothing (see also disabling imageSmoothingEnabled by default on multiple canvases)

how to save DIV as Image with canvas2image with extension

I have done the following code to convert HTML Content(DIV) to save as Image (JPEG, PNG,GIF Etc) with below code.
<pre>
html2canvas($(".mainbox"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
Canvas2Image.saveAsImage(canvas);
$("#FinalImage").append(canvas);
}
});
</pre>
I have also included html2canvas.js,base64.js and canvas2image.js in my page. At the end Image is shown in #FinalImage DIV and browser ask me to save it in my drive up to now all are working fine.
Now the question is name of the saved image has no Extension, every time I need to go to the image and assign the Extension(".jpg",".png" etc...). Is there any solution to set extension by default when user saves from the browser.
Thanks in advance.

I have done same functionality for capturing signature. This is different from your approach. but this code snippet may help you. plz comment if u need whole source code.
var canvas = document.getElementById(<canvas element id>)// get canvas element
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension
document.getElementById(<new image id>).src = dataURL; // write as an image
In line two I specified png.there you can change the extension of image. Hope it helps

Assistance with HTML5 Canvas and JS displaying images on it please?

I'm making an Android game, in HTML5 and Javascript, I am part of the way there, but have hit something that has stumped me, My JS file and my Html file were working together, to draw on the canvas etc, but now I'm trying to draw an image on the canvas, nothing is being displayed, I know the img function is being found, as, alert (img);, works so it's just lost on me. (currently this is copied from a book I was given at college, and it's identical, the JS has been verified in JSHint and passes, so I'm lost) also, please be quite simple, I'm pretty new to JS but have used html for a long time, and this just has to be a simple game for a college assignment.
My HTML code is
<canvas id="game" width="1024" height="600">Sorry, your browser does not support this</canvas>
and my JS is:
function init() {
var elem = document.getElementById('game');
var canvas = elem.getContext('2d');
var img = document.createElement('img');
img.setAttribute('src', 'http://www.minkbooks.com/content/snow.jpg');
img.addEventListener("load", function() {
canvas.drawImage(img, 20, 20);
alert(canvas);
});
}
addEventListener("load", init);
and here it is on JSfiddle: http://jsfiddle.net/xw8m7/

This answer is based on your jsfiddle. You are executing your javascript code as soon as it is loaded. Depending on where your code is located in the html, the canvas element might not be loaded yet, and that would prevent your code from loading the image into the canvas element, and you would still get the alert.
In JSFiddle, you need to set the option of running your code "onDomready". That means that the JavaScript won't run until everything has been loaded (your canvas element). After changing that in your jsfiddle, your function loaded the image into the canvas just fine.
Update:
Based on your comment about XDK, I found a bit of example code and modified it. Original source: https://software.intel.com/en-us/node/493117
document.addEventListener("intel.xdk.device.ready",function(){
init();
},false);

How to force a download instead of opening the file?

So basically, I am using a simple library called HTML2Canvas
This is my current code working great and is being called from an onclick event from a button:
function saveForm()
{
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
Basically, all it does is take a screen shot and append it to the bottom of the page.
There was already a question similar to this, although the answer did not work and the download is always a corrupt jpg file:
html2canvas saving as a jpeg without opening in browser
Would there be a way to force a download within this function instead of appending it to the bottom of the page?

Use canvas.toDataURL to get the canvas content as an image src
open a window/popup
add an <img> to the popup
assign the image src as src for the image
function saveForm() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var open = window.open('','','width=500,height=500')
open.document.write('<img id="img" style="width="400">');
open.document.getElementById('img').setAttribute('src', img);
}
});
}
Tested the code inside onrendered, and it works for sure - but not along with html2canvas.
If you right click on the image in the popup -> save image as, the saved image is valid.
The reason why I am using setAttribute and not simply src="..." is that if you assign the data src as string the image get corrupted.
Edit
I know :( I think you have to set HTTP Headers to force a download, and this can only be done by the server (correct me if I am wrong). I think of a "proxy" on the server like this mockup, download.php :
<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>
and call it by
var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);
But then you will face a lot of Request-URI Too Large-messages, unless all your canvas-images is in icon-size.
A second way - and probably the one that would work - would be to save img in a table on the server through ajax, eg calling a script with img src that saves it. When this call is finished, you could call another server script with the correct headers for image download, including the img src saved just before. But this is a more extensive approach you could try yourself..?

Here is a solution that builds on the accepted one to enable a download button without server-side code using jQuery.
https://codepen.io/nathansouza/pen/OXdJbo
function download(url){
var a = $("<a style='display:none' id='js-downloder'>")
.attr("href", url)
.attr("download", "test.png")
.appendTo("body");
a[0].click();
a.remove();
}
function saveCapture(element) {
html2canvas(element).then(function(canvas) {
download(canvas.toDataURL("image/png"));
})
}
$('#btnDownload').click(function(){
var element = document.querySelector("#capture");
saveCapture(element)
})