image (or canvas) size

[Palvalo]

Hi @eKoopmans
first of all, thank you for an amazing tool for creating PDFs, I appreciate the quality settings and simplicity of its usage!

The issue I am solving right now is how can I set the canvas (or an image of it) to the same size as the page of pdf has.

I am trying something like this:
html2canvas: { dpi: 192, letterRendering: true, width: docWidth, height: docHeight }
jsPDF: { unit: "mm", format: [docHeight, docWidth], orientation: "p" }
or this:
image: { type: 'jpeg', quality: 1, width: docWidth, height: docHeight }

The second one is invalid, image width or height cannot be changed here, the first one gives strange results - the screenshot appears to be scaled but its position is shifted.

My overall goal is to get a screenshot of the html element - which I am getting. But this screenshot should be of the same size as pdf document is and fit to the page perfectly (that means it is placed at coordinates (0,0) of the document page).

How can I achieve this?
Thanks for your response.

[eKoopmans]

Hi @Palvalo! The only setting you should need to change to accomplish that is the margin - give it a value of 0. The rest of the settings can be anything you want.

Right now margin has a default value of 1, but I'm thinking I should change that to 0 for simplicity, especially since 1 has a different meaning depending on units.

[Palvalo]

Actually, I am having it on value of 0:

html2pdf(targetElement, {
margin: 0,
filename: 'name.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { dpi: 192, letterRendering: false, docWidth, docHeight },
jsPDF: { unit: "mm", format: [docHeight, docWidth], orientation: "p" }
});

EDIT: My mistake. Now I realised that html2canvas width and height are probably in pixels while format in jsPDF is certainly in milimetres. But how can I normalize these width/height values to match each other?

Of course, default value of 0 would be better, I think.

[eKoopmans]

Okay, good question. I won't have a chance to look at this today. A few suggestions though:

1. Have you tried removing the width/height from the html2canvas options entirely? They shouldn't be necessary, the canvas should be created with the right size based on the jsPDF settings.

2. In the code you copied in your latest comment, it looks like there might be a mistake, where docWidth and docHeight are being attached to the html2canvas settings incorrectly (should be height: docHeight etc). But I don't think that will solve your problem.

[Palvalo]

Thanks for replies.

1. At first I had it like you - without width and height:
   html2pdf(targetElement, {
margin: 0,
filename: 'name.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { dpi: 192, letterRendering: false },
jsPDF: { unit: "mm", format: [docHeight, docWidth], orientation: "p" }
});
   But without desired effect of having screenshot "fullscreen".

2. No, that is not solving my problem, but of course you are right:
   This one (incorrect)
   html2canvas: { dpi: dpiResolution, letterRendering: false, docWidth, docHeight }
   leads to the same result as
   html2canvas: { dpi: dpiResolution, letterRendering: false }
   probably because of values docWidth, docHeight are ignored.

Anyway, I still need to fit the screenshot to the page size. Thanks for your help.

[eKoopmans]

Hi @Palvalo, are you saying you want the image of the element to be shrunk down to fit onto a single page? That's a feature I'm planning to add, but it's not an option yet.

[davshoward]

Hi there,

Do you have an ETA on this feature? It's the one feature that will make this plugin ideal :-)

Cheers

[eKoopmans]

Hmm, no I don't, but I'll put it high on my priority list. Things are busy right now, I won't have much free time in the next few weeks unfortunately!

[ftl-vrushali]

Hi
Following is my code snippets,

html2pdf(element, {
margin: 0,
filename: 'product_detail.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true },
jsPDF: { unit: 'in', format: 'A4', orientation: 'portrait' }
});

Scenerio :- Image and Text content next to each other.

Problem statement :- i want to reduce image size, that is coming in pdf file. As i open pdf file Image is too large size. and it overrides text content next to Image. So i want to reduce image size.

[darshanksexathought]

i don't know if it's a good idea to shrink the image to page size it maybe not be clear, but you can create a pdf with you current window size so that you can see everything without trimming the image,
await html2pdf().from(element).set(getOptions(filename, element)).save()
const getOptions =(filename, element)=>{
let opt = {
margin: 0,
filename: filename+'.pdf',
image: { type: 'png', quality: 0.7 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'mm', format: [element.offsetWidth, element.offsetHeight], orientation: 'landscape' }
};
return opt
}