jsPdf || 🖼️ Adjust image in scale Which will fit in page.
Tags: jspdf, javascript, webdev
Published: 2021-08-21 04:12:00


## Making js-based serverless 
![serverless explain image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp6dwq1rxj0tzeapq1v1.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a11wlp4s9o29op3un50t.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzmfggk9zr1dec1cg0yb.jpg)
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
```html
<input type="file" onchange="getratio(this.files"/>
```
```js
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;
}
```
It was how I noted Ratio.
## Making image fit on page
![Illustration that shows resize icon from icons8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu1wfq1mmvew57avyytj.png)
> 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.
```js
const max = {height:300,width:210}
```
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
```js
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");
}

```
## 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 NotableApp/Formal-stack-pdfs %}