Articles in this section
Category / Section

How to load and display an image in PDF Viewer?

3 mins read

You can load and display an image in the PDF viewer as a workaround using the Syncfusion PDF library. Refer to the following code.

HTML

<div style="padding:10px">
                    <input type="file" id="fileUpload">
                    <button id="fileUploadButton">Choose file from disk</button>
                </div>

 

JavaScript

document.getElementById('fileUpload').addEventListener('change', readFile, false);
        function readFile(evt) {
            var upoadedFiles = evt.target.files;
            var uploadedFile = upoadedFiles[0];
            var reader = new FileReader();
            reader.readAsDataURL(uploadedFile);
            reader.onload = function () {
                //Gets the uploaded image data as base64 string
                var uploadedFileUrl = this.result;        
                var fileUrl = uploadedFileUrl.split("base64,")[1];           
                var jsonResult = {};
                jsonResult["uploadedFile"] = JSON.stringify(fileUrl);
                $.ajax({
                        url: "../api/PdfViewer/LoadImage",
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(jsonResult),
                        dataType: 'json',                       
                        crossDomain: true,
                        traditional: true,
                        success: function (data) {
                         var pdfviewer = $("#container").data("ejPdfViewer");
                         //Loads the base64 string in PDF viewer
                        pdfviewer.load(data);                          
                        }
                    });                   
            }
        }        

 

C#

  public object LoadImage(Dictionary<string, string> jsonResult) {
            var fileurl = jsonResult["uploadedFile"];
 
            var data = JsonConvert.DeserializeObject(fileurl);
 
            //Converts the base64 string to byte array
 
            byte[] byteArray = Convert.FromBase64String((string)data);
 
            MemoryStream stream = new MemoryStream(byteArray);
 
            //Converts memory stream to image
 
            Image img = Image.FromStream(stream);
 
            //Create a new PDF document
 
            PdfDocument doc = new PdfDocument();
 
            //Add a page to the document
 
            PdfPage page = doc.Pages.Add();
 
            //Create PDF graphics for the page
 
            PdfGraphics graphics = page.Graphics;
 
            //Converts the memory stream into PdfBitmap
 
            PdfBitmap image = new PdfBitmap(stream);
 
            //Draw the image
 
            graphics.DrawImage(image, 0, 0);
 
            MemoryStream docStream = new MemoryStream();
 
            doc.Save(docStream);
 
            string output = "data:application/pdf;base64," + Convert.ToBase64String(docStream.ToArray());            
 
            return output;
        }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_LoadImage-489203219

 

In the provided sample, click the Choose file from disk to upload the image and view in the PDF viewer.


Conclusion

I hope you enjoyed learning about how to load and display an image in PDF viewer.

You can refer to our JavaScript PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied