How to load and display an image in PDF Viewer?
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!