DEV Community

Cover image for jsPdf || 🖼️ Adjust image in scale Which will fit in page.
ShGI
ShGI

Posted on • Updated on

jsPdf || 🖼️ Adjust image in scale Which will fit in page.

Making js-based serverless

serverless explain image
online pdf maker / generator.
It is hard to make clientside apps. It needs to get more libraries and stackoverflow (for me)🤓.
I was also trying to create clientside pdf generator and I found very use ful library.which is jsPDF.So,I taken it and started to make app.

Starting using jsPDF

jsPdf logo
It was also not simple to implement library.Mainly the photo is not being fit on the page of pdf file.

let me show you example .

the pdf generated with jsPDF example
In this screenshot you can see the photo is going out of the pdf page
I searched it on Google but no one written article on it and also jsPDF not given solution on this problem.
So, I started solving this problem.

Ratio

It's important to know the ratio
of image height as width so we can derive the small scale of the image which will fit on the page of pdf

here how to get ratio of image

Note : we have to get ratio of image exact after image upload so, we can be able to use it globally whenever we wanted..

Let's code it

<input type="file" onchange="getratio(this.files"/>
Enter fullscreen mode Exit fullscreen mode
var images_to_convert = []
var getRatio = (files) =>{
// Note files is json object not array object
for(let file of Object.values(files)){
let reader = new FileReader();
reader.onloadend=()=>{
let imgsrc = reader.result;
addImageToPdf(imgsrc);
}
reader.readAsDataUrl(file);
}

function addImageToPdf (src){
// src is data url of image

let img = new Image();
img.onload=()=>{
images_to_convert.push({src:img.src, height:img.height,width:img.width})
// Now successfully ratio of height as width is noted
}
img.src=src;
}
Enter fullscreen mode Exit fullscreen mode

It was how I noted Ratio.

Making image fit on page

Illustration that shows resize icon from icons8

Image by icons8

Now we have ratio of image.only we need is page height and width size.
A4 page have width 210mm and height 300mm so the max is 300mm*210mm.

const max = {height:300,width:210}
Enter fullscreen mode Exit fullscreen mode

We have know that the image height and width is in pixels but this doesn't Matter because it's in ratio.
Because , Height as well as width decrease or increase at same time so ratio will in same proportion.

Rendering

Now things we have are

  • Max height and width
  • Ratio of image height as width

If width of page is smaller than image width then image width will be page width similarly , if height of page is smaller than image height then image height is page hei axis.
Let me show in code

var render = () =>{
var doc = new jsPDF("p", "mm", "a4");
image_to_convert.forEach(img=>{
// img is json that we stored previously
let height=img.height,width=img.width,src=img.src,ratio=img.height/img.width;
if(height>max.height||width>max.width){
if(height>width){
height=max.height;
width=height*(1/ratio);
// Making reciprocal of ratio because ration of height as width is no valid here needs width as height
}else if(width > height){
width=max.width;
height=width*ratio;
// Ratio is valid here 
}
}
doc.addImage(src,"png",0,0,width,height);   
doc.addPage("p","mm","a4");
// Now successfully fitted image on page                                                
// I will prefer to use mm instead px

});
doc.save("download.pdf");
}

Enter fullscreen mode Exit fullscreen mode

demo

https://formal-stack.netlify.app/

I have created the App which converts images into pdf. Which will show you how images are being fitted on page of jsPDF.
Source code:-

GitHub logo NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.






Top comments (2)

Collapse
 
kurybr profile image
Jorge Soares

Thanks for this article !

Help me on job to fix a problem

Collapse
 
shubham_ingale profile image
ShGI

Also visit my app
formal-stack.netlify.app/