Image to PDF Converter in Salesforce

Okay, so this is one of my POCs I was doing recently where I need to convert an image to PDF. I can't disclose the full use case but hope it will help some.

So here is the solution in two simple steps :

1) First insert these three static resources (with the same names)

(i) Bootbox

(ii) Bootstrapss

(iii) PdfConverter

2) Visualforce Page

view plain print ?

1. <apex:page standardstylesheets="false" sidebar="false">   
2.     <!-- Bootbox use for ui and alert box -->  
3.     <apex:stylesheet value="{!URLFOR($Resource.Bootbox, 'bootbox/bootstrap.min.css')}">  
4.     <apex:includescript value="{!URLFOR($Resource.Bootbox, 'bootbox/jquery.min.js')}">  
5.     <apex:includescript value="{!URLFOR($Resource.Bootbox, 'bootbox/bootstrap.min.js')}">  
6.     <apex:includescript value="{!URLFOR($Resource.Bootbox, 'bootbox/bootbox.js')}">  
7.       
8.     <!-- Script use to convert and save image into pdf file -->  
9.     <apex:includescript value="{!URLFOR($Resource.pdfconverter, 'pdfconverter/newjspdf.js')}">  
10.     <apex:includescript value="{!URLFOR($Resource.pdfconverter, 'pdfconverter/filesever.js')}">  
11.     <apex:includescript value="{!URLFOR($Resource.pdfconverter, 'pdfconverter/jspdfplugin.js')}">  
12.     <apex:includescript value="{!URLFOR($Resource.pdfconverter, 'pdfconverter/jQueryMini.js')}">    
13.    
14.        
15.         <script type="text/javascript">  
16.             var $j = jQuery.noConflict();  
17.         </script>  
18.         <apex:stylesheet value="{!$Resource.Bootstrapss}">  
19.       
20.       
21.     <!-- Script to upload and convert images into pdf file -->  
22.     <script>  
23.     function uploadFile(){  
24.         var pdf = new jsPDF('p', 'mm', [270, 270]);  
25.         var images = [];  
26.         <!--Get image file in script for to convert-->  
27.         var files = document.getElementById('attachmentFile').files;  
28.         if(files.length == 0){  
29.             bootbox.alert("Please select at least one image to convert!");  
30.         }  
31.         var i = 0;  
32.         for(var j=0 ; j<files.length ; j++){  
33.             var fileToLoad = files[j];  
34.             var fileReader = new FileReader();  
35.               
36.             fileReader.readAsDataURL(fileToLoad);  
37.             fileReader.onload = function(e){         
38.                 var image = new Image();  
39.                 image.src = e.target.result;   
40.                 image.onload = function (){   
41.                     <!--Change all image in jpeg format-->   
42.                     var canvas = document.createElement("canvas"),  
43.                     canvasContext = canvas.getContext("2d");   
44.                     <!--Compress large image file-->  
45.                     if(image.width > 1018 ){     
46.                         canvas.width = 1018;  
47.                         image.width =1018;  
48.                     }  
49.                     else{  
50.                         canvas.width = image.width;  
51.                     }  
52.                       
53.                     if(image.height > 1018 ){     
54.                         canvas.height = 1018;  
55.                         image.height =1018;  
56.                     }  
57.                     else{  
58.                         canvas.height = image.height;  
59.                     }  
60.                       
61.                     canvasContext.drawImage(image, 0, 0, image.width, image.height);  
62.                     var imgData = canvas.toDataURL("image/jpeg", 1.0);  
63.                     //var picFile = e.target.result;  
64.                     <!--Add image in pdf document-->  
65.                     pdf.addImage(imgData, 'JPEG', 0,11);     
66.                     i++;  
67.                     if(i < files.length){  
68.                         pdf.addPage();     
69.                     }  
70.                     if(i == files.length){  
71.                         pdf.save();  
72.                         bootbox.alert("Your image converted successfuly!");  
73.                     }   
74.                 };  
75.                 <!--Show error message when any error occur-->  
76.                 image.onerror = function(){  
77.                     bootbox.alert('Selected image not converted into pdf file');  
78.                 };  
79.             };  
80.           
81.             fileReader.onloadend = function(evt){  
82.             };  
83.         }  
84.     }  
85.     </script>  
86.  <!-- Page block to select pdf file -->  
87. <apex:pageblock title="Image to pdf converter">  
88.       
89.   
90.   
91.      <apex:outputlabel value="Please select images to convert:" style="font-size: large;">  <input type="file" id="attachmentFile" multiple="multiple" accept="image/*" class="paginationButtons">  
92.     <button οnclick="uploadFile()" class="btn-primary"><b>Convert image files into pdf file</b></button>  
93.   
94. </apex:outputlabel></apex:pageblock>  
95. </apex:stylesheet></apex:includescript></apex:includescript></apex:includescript></apex:includescript></apex:includescript></apex:includescript></apex:includescript></apex:stylesheet></apex:page>  

(As it was just a POC so code is not clean yet, hope you can take care of that)

Okay so now all set to go, just hit the page and select any image you want to get converted in PDF. Multiple images can also be uploaded.