Img To PDF

├── README.md ├── index.html ├── index.css └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # imgToPdf 2 | 3 | Here are some screenshots from the project 4 | 5 | ![Screenshot (151)](https://user-images.githubusercontent.com/68517660/138468465-34a300cb-b882-45a3-8aea-e578a5f04888.png) 6 | 7 | 8 | 9 | ![Screenshot (152)](https://user-images.githubusercontent.com/68517660/138468550-67f642cd-48f2-47e8-b61e-f6f892b5f688.png) 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Img To PDF 9 | 10 | 11 | 12 |

13 | 14 | PDF 15 | 16 |

17 | 18 | 19 | 20 |

21 |

22 | 23 |

24 |

25 |

26 |

27 | 28 |

29 | DRAG & DROP OR 30 |

31 |

32 | 33 | 34 |

35 | CHOOSE FILES 36 |

37 |

38 |

39 |

40 | 41 |

42 |

43 | 44 |

45 |

46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .nav{ 7 | padding: 0.5rem 1rem; 8 | background:white; 9 | border-bottom: 1px solid rgb(245, 244, 244); 10 | position: sticky; 11 | top: 0; 12 | z-index: 1; 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | .logo{ 18 | font-size: 2rem; 19 | color: rgb(182, 34, 34); 20 | } 21 | #convertBtn,#upload-msg,#download{ 22 | border: none; 23 | outline: none; 24 | background: rgb(89, 150, 248); 25 | color: white; 26 | border-radius: 0.2rem; 27 | padding: 0.5rem 1rem; 28 | font-size: 1.2rem; 29 | margin-right: 2rem; 30 | } 31 | #download,#convertBtn{ 32 | display: none; 33 | } 34 | 35 | .input-page{ 36 | position: relative; 37 | top: 0; 38 | } 39 | .add-more-files{ 40 | width: 50vw; 41 | border-radius: 0.3rem; 42 | padding: 3rem; 43 | margin:5rem auto; 44 | text-align: center; 45 | background: rgba(230, 230, 250, 0.13); 46 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 47 | } 48 | .inp-container{ 49 | cursor: pointer; 50 | position: relative; 51 | box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(124, 124, 145, 0.1) 0px 16px 48px; 52 | height: 15rem; 53 | background: rgba(154, 127, 228, 0.068); 54 | width: 15rem; 55 | border-radius: 50%; 56 | border: 1px dashed rgb(195, 193, 193); 57 | margin: auto; 58 | border-width: 0.15rem; 59 | } 60 | #upload-file{ 61 | opacity: 0; 62 | display: block; 63 | height: 16rem; 64 | width: 100%; 65 | position: absolute; 66 | cursor: pointer; 67 | } 68 | .img-icon{ 69 | color: rgba(128, 144, 238, 0.596); 70 | } 71 | #custom-file{ 72 | color: rgb(96, 102, 155); 73 | position: relative; 74 | top: 0.5rem; 75 | padding: 0.5rem 0.8rem; 76 | font-size: 1.1rem; 77 | border-radius: 0.2rem; 78 | font-weight: 600; 79 | } 80 | 81 | span{ 82 | font-size: 1.45rem; 83 | } 84 | .drop{ 85 | margin-top: 3rem; 86 | font-size: 1rem; 87 | color: rgb(108, 107, 175); 88 | } 89 | 90 | .pdf-page{ 91 | z-index:-1; 92 | min-height: 90%; 93 | width:100%; 94 | display: none; 95 | overflow: hidden; 96 | } 97 | .create-pdf{ 98 | position: relative; 99 | padding: 1rem; 100 | margin: auto; 101 | } 102 | .file-item{ 103 | padding: 0 1rem; 104 | background: none; 105 | text-align: center; 106 | position: relative; 107 | width: 10rem; 108 | height: 16rem; 109 | text-align: center; 110 | margin: 1rem; 111 | display: inline-block; 112 | transition: 0.3s all ease-in-out; 113 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 114 | } 115 | .modify button{ 116 | padding: 0.3rem; 117 | font-size: 1rem; 118 | color: rgb(250, 64, 64); 119 | border-radius: 50%; 120 | } 121 | .img-container{ 122 | width: 8.5rem; 123 | margin: auto; 124 | height: 11rem; 125 | position: relative; 126 | display: flex; 127 | align-items: center; 128 | justify-content: center; 129 | } 130 | #img{ 131 | position: relative; 132 | max-width: 9rem; 133 | max-height: 11rem; 134 | background: white; 135 | overflow: hidden; 136 | box-sizing: border-box; 137 | border: 0.1rem solid rgb(223, 222, 222); 138 | } 139 | .file-item button{ 140 | margin: 0 0.2rem; 141 | background: none; 142 | border: none; 143 | outline: none; 144 | font-size: 1.2rem; 145 | transition: 0.3s all ease-in-out; 146 | opacity: 0; 147 | padding: 0.3rem 0.5rem; 148 | 149 | } 150 | .file-item button:hover{ 151 | background: rgb(224, 248, 251); 152 | } 153 | .file-item:hover button{ 154 | opacity: 1; 155 | } 156 | .delete{ 157 | pointer-events: none; 158 | } 159 | #img-name{ 160 | overflow: hidden; 161 | white-space: nowrap; 162 | text-overflow: ellipsis; 163 | width: 8.5rem; 164 | text-align: center; 165 | margin: 1rem auto; 166 | } 167 | 168 | .add-more-file{ 169 | padding: 0 1rem; 170 | background: none; 171 | text-align: center; 172 | position: relative; 173 | margin: 0.5rem; 174 | display: inline-block; 175 | transition: 0.3s all ease-in-out; 176 | width: 10rem; 177 | height: 16rem; 178 | vertical-align: top; 179 | } 180 | .inp-cont{ 181 | display: flex; 182 | flex-direction: column; 183 | flex-flow: column-reverse; 184 | border-radius: 50%; 185 | position: relative; 186 | text-align: center; 187 | border: none; 188 | background: rgb(241, 246, 246); 189 | width: 9rem; 190 | height: 9rem; 191 | margin: 3rem auto; 192 | } 193 | #inp{ 194 | opacity: 0; 195 | display: block; 196 | width: 9rem; 197 | height: 9rem; 198 | border-radius: 50%; 199 | position: absolute; 200 | cursor: pointer; 201 | } 202 | 203 | .create-pdf .add-more-file p{ 204 | position: relative; 205 | top: -3.5rem; 206 | } 207 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var data= []; 2 | var width= 620; 3 | var height= 800; 4 | var pdfName; 5 | var fileName= ''; 6 | 7 | const createPDF= document.getElementById('create-pdf'); 8 | 9 | encodeImageFileAsURL= (element)=>{ 10 | document.getElementById('input-page').style.display= 'none'; 11 | document.getElementById('pdf-page').style.display= 'inline-block'; 12 | 13 | const length= element.files.length; 14 | for(var i=0;i{ 27 | data= [...data,obj]; 28 | pdfName= pdfname.name 29 | } 30 | } 31 | 32 | setTimeout(convertToPDF,1000); 33 | document.getElementById('upload-file').value= null; 34 | setTimeout(saveAsPDF,1000); 35 | } 36 | 37 | 38 | saveAsPDF= ()=>{ 39 | document.getElementById('upload-msg').style.display= 'none'; 40 | document.getElementById('convertBtn').style.display= 'inline-block'; 41 | } 42 | 43 | 44 | //delete item from pdf page 45 | handleDelete= (e)=>{ 46 | data= data.filter((item)=>item.time!==e.currentTarget.id); 47 | if(data.length==0){ 48 | location.reload(); 49 | } 50 | else{ 51 | convertToPDF(); 52 | } 53 | } 54 | 55 | 56 | //initiate file downloading 57 | embedImages= async ()=>{ 58 | const pdfDoc= await PDFLib.PDFDocument.create(); 59 | for(var i=0;i res.arrayBuffer()); 62 | 63 | const jpgImage = await pdfDoc.embedJpg(jpgImageBytes); 64 | 65 | //Add a blank page to the document 66 | const page= pdfDoc.addPage(); 67 | 68 | //set page size 69 | page.setSize(width,height); 70 | page.drawImage(jpgImage, { 71 | x: 20, 72 | y: 50, 73 | width: page.getWidth()-40, 74 | height: page.getHeight()-100, 75 | }) 76 | } 77 | 78 | //save the padf pages 79 | const pdfBytes= await pdfDoc.save(); 80 | 81 | //download pdf file 82 | download(pdfBytes, pdfName.slice(0,-4), "application/pdf"); 83 | 84 | //back to home page after downloading file 85 | setTimeout(backToHomepage,1000); 86 | } 87 | 88 | //display pdf images 89 | function convertToPDF(){ 90 | createPDF.innerHTML= ''; 91 | data.map((item,i)=>{ 92 | const fileItem= document.createElement('div'); 93 | fileItem.setAttribute('class','file-item'); 94 | 95 | const modify= document.createElement('div'); 96 | modify.setAttribute('class','modify'); 97 | 98 | const button2= document.createElement('button'); 99 | button2.setAttribute('class','delete-btn'); 100 | button2.setAttribute('id',item.time); 101 | const remove= document.createElement('i'); 102 | remove.setAttribute('class','fa fa-trash'); 103 | button2.appendChild(remove); 104 | button2.addEventListener('click',(e)=>{ 105 | handleDelete(e); 106 | }); 107 | 108 | modify.appendChild(button2); 109 | 110 | fileItem.appendChild(modify); 111 | 112 | const imgContainer= document.createElement('div'); 113 | imgContainer.setAttribute('class','img-container'); 114 | const img= document.createElement('img'); 115 | img.setAttribute('id','img'); 116 | img.src= item.list.result; 117 | imgContainer.appendChild(img); 118 | fileItem.appendChild(imgContainer); 119 | 120 | const imgName= document 121 | .createElement('p'); 122 | imgName.setAttribute('id','img-name'); 123 | imgName.innerHTML= item.fileName; 124 | fileItem.appendChild(imgName); 125 | 126 | //fileItem is the child of createPDF 127 | createPDF.appendChild(fileItem); 128 | 129 | }); 130 | 131 | const addMoreFile= document.createElement('div'); 132 | addMoreFile.setAttribute('class','add-more-file'); 133 | 134 | const addFile= document.createElement('div'); 135 | addFile.setAttribute('class','inp-cont'); 136 | 137 | const input= document.createElement('input'); 138 | input.setAttribute('id','inp'); 139 | input.type= 'file'; 140 | input.multiple= 'true'; 141 | input.onchange= function(){ 142 | encodeImageFileAsURL(this); 143 | } 144 | 145 | const p= document.createElement('p'); 146 | const i= document.createElement('i'); 147 | i.setAttribute('class','fa fa-plus'); 148 | 149 | p.appendChild(i); 150 | 151 | const label= document.createElement('label'); 152 | label.htmlFor= 'inp'; 153 | label.innerHTML= 'Add Files'; 154 | 155 | addFile.appendChild(p); 156 | addFile.appendChild(label); 157 | addFile.appendChild(input); 158 | 159 | //addFile is the child of addMoreFile 160 | addMoreFile.appendChild(addFile); 161 | 162 | //addMoreFile is the child of createPDF 163 | createPDF.appendChild(addMoreFile); 164 | } 165 | 166 | //back to home 167 | function backToHomepage(){ 168 | location.reload(); 169 | } 170 | --------------------------------------------------------------------------------