Develop Reference

pdfMake / html2canvas is way too big for PDF output, how to resize?

I'm trying to convert a section of my HTML page into a PDF file. I don't want the whole page because it contains buttons, etc. that aren't necessary.
So I created a div that has a height 0 and adding the content I need to print into the underlying div then removed elements and printed. All my code is below. It works well but the pdf is WAY too zoomed in and I can't fix it. I've attached my code and resulting pdf output below. I've tried so many different settings. Does anyone have tips?
<div style="overflow: hidden; height: 0;">
<div id="mainClone"></div>
</div>
function printPDF()
{
html2canvas($('#mainClone'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
pageSize: {
width: 1000,
height: 'auto'
},
content: [{
image: data,
//width: width,
//height: height,
}],
pageSize: 'letter',
pageOrientation: 'landscape',
pageMargins: [ 5, 5, 5, 5 ],
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
$('#PrintPDF').click(function () {
$('#mainClone').html($('#main').html());
$('#mainClone').find(".calendar-prev").hide();
//remove more html elemnent we don't need
printPDF();
});

You can make it while still using jspdf, instead of creating an extra div, go with your default page and with any unnecessary element(which you do not want into your PDF) add this
data-html2canvas-ignore="true"
to each unnecessary element.
this will ignore that element and will not put into your generated PDF.

html2canvas capturing low quality picture

I am trying to capture a div with canvas inside. it is a tshirt editor. now i am capturing this div with html2canvas and then printing it in pdf using jspdf. Now the problem is that the captured image is of very low quality and blurry. its dpi are very low.
This is the original div picture:
and this is the printed version of that div:
You can see the quality difference between them is huge.
Anyway here is the code of capturing the div and then converting it into pdf
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
setTimeout(print2, 1);
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255); " >
<img name="tshirtview" id="tshirtFacing" src="img/crew_front.png">
<div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
</div></div>
Please ignore the on-line CSS

Ok i did it because of the similar question asked by someone else in this link but the answer wasn't marked correct because he didn't explained it right maybe. Anyway here is the solution.
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')[0],{scale:4}).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
The scale property was mentioned everywhere but i was having trouble to apply it. yes i know i am stupid but maybe someone else is like me and this might help them :)
UPDATE VERSION
This HTML2CANVAS solution was still not working good for me because the scale option does increase the target div's size before capturing it but it won't work if you have something inside that div which won't resize e.g in my case it was canvas for my editing tool. Anyway for this i opted for domtoimage and trust me i think that this is the best solution of them all. I didn't had to face any problem of html2canvas for example: need to be at the top of webpage so html2canvas can capture the shot completely and Low dpi problem
Anyway sorry for the story but i thought everyone should know and here is the code
function print() {
var node = document.getElementById('shirtDiv');
var options = {
quality: 0.95
};
domtoimage.toJpeg(node, options).then(function (dataUrl) {
var doc = new jsPDF();
doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
doc.save('Test.pdf');
});
}
Cdn for dom to image: https://cdnjs.com/libraries/dom-to-image
Cdn for jspdf: https://cdnjs.com/libraries/jspdf

How to copy/paste an image to another image with Konva.js?

I'm building a game similar to Tetris, but with blocks that move smoothly (pixel by pixel).
At the moment I create a separate Konva Image object for each new block:
let block = new Konva.Image({
x: 200,
y: 0,
transformsEnabled: 'position',
listening: false,
image: images.tiles,
crop: {
x: colorindex * 128,
y: shapeindex * 128,
width: 128,
height: 128
},
width: 128,
height: 128,
colorindex: colorindex,
shapeindex: shapeindex,
falling: true,
fallingspeed: 1,
});
that.blocks.push(block);
that.blocklayer.add(block);
With a lots of blocks on the screen I notice a slight slowdown in the animations.
Now I want to try and put all fixed blocks into 1 big Image object to see if this is faster.
Is it possible with Konva to copy a part of an image to another image ?

The simplest solution is to just move several blocks into a group, and then just cache it:
group.cache();
Demo: https://konvajs.org/docs/performance/Shape_Caching.html

convert web page to a pdf with styles

I want to convert a web page to PDF including all the styles I've added.
I've used jspdf.js and html2Canvas. But I got only a blur picture in PDF form.
I've searched for many JavaScript codes but didn't find a correct one.
Script I have written is:
function getPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("Image/jpeg");
//window.open(img);
var doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 440, 627);
doc.save("download");
}
});
}
Thank You!

There may be a few things that are contributing.
Your encoder options for the canvas.toDataURL are missing, so you're getting the defaults. The defaults may be creating a low quality image. Try this for the highest quality JPEG image:
var img = canvas.toDataURL("Image/jpeg", 1.0);
You might also try creating your jsPDF object with measurements, rather than pixels:
var pdf = new jsPDF("p", "mm", "a4"); // jsPDF(orientation, units, format)
And when you add the image, scale it to the dimensions of the page:
pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277); // 190x277 mm # (10,10)mm
See if that gives you a better image quality.

JCrop resizing the image not cropping - Javascript

I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code:
$('#myForm').ajaxForm({
dataType: 'json',
success: function (result) {
$("#image-editor-preview img")
.attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
.Jcrop({
aspectRatio: 1,
setSelect: [100, 100, 50, 50],
minSize: [160, 160],
maxSize: [160, 160],
onChange: setCoords,
onSelect: setCoords
});
}
});
var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
x = c.x;
y = c.y;
w = c.w;
h = c.h;
};
However this is what happens:
I have tried tried quite a bit to fix this but the end results are ALWAYS the same. Anyone have any ideas? Thanks.

I had the same problem, but I found, why it happens so.
In my css file I had this code:
img {
width: 100%;
height: auto;
border: none;
}
When I removed width and height from this definition, plugin started working correctly.

I was able to figure it out. Turns out that JCrop inside a twitter bootstrap modal has an issue with the width of the JCrop box. The twitter bootstrap modal is overriding the CSS inside the JCrop css. Had to modify the CSS in JCrop to not have this happen.

According to the Jcrop docs, it does not actually do the cropping. It only creates a image cropping UI. It then depends on the server doing the actual cropping; see http://deepliquid.com/content/Jcrop_Implementation_Theory.html . So it looks like the plugin is doing exactly what it is designed to do. It's now leaving the rest for you to do yourself on the server, as they show.