Programmatically Insert Image

[Joshua Rush]

Hello,

I want to mimic this feature from the "Add Signature" icon:

The user can select an image to upload, then have a free form image to move around and place where they see fit. I plan on adding a custom icon for a user to click that allows them to upload an image, how would I insert the image on to the form so they can drag it around and place it where they see fit? Is it possible?

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can utilize the custom stamp annotation feature to add images to the PDF document. Use a button to trigger an input function that opens the file explorer, allowing users to select the desired image. Then, load the selected image into the viewer using the addAnnotation() method. Below, we have provided a code snippet and a sample for your reference.

Code Snippet:

<div>

   

    <button id="set" onclick="customStamp()">Custom Stamp</button>

    <div style="height:500px;width:100%;">

        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()

        <input type="file" id="fileUpload" accept=".png,.jpg,.jpeg" style="display:block;visibility:hidden;width:0;height:0;">

    </div>

</div>

 

<script type="text/javascript">

 

    window.onload = function () {

        document.getElementById('fileUpload').addEventListener('change', readFile, false);

    }

 

    function customStamp() {

        document.getElementById('fileUpload').click();

    }

 

    function readFile(evt) {

        var upoadedFiles = evt.target.files;

        var uploadedFile = upoadedFiles[0];

        filename = upoadedFiles[0].name;

        var reader = new FileReader();

        reader.readAsDataURL(uploadedFile);

        reader.onload = function () {

            var obj = document.getElementById('pdfviewer').ej2_instances[0];

            var uploadedFileUrl = this.result;

            obj.annotation.addAnnotation("Stamp", {

                offset: { x: 200, y: 530 },

                pageNumber: obj.currentPageNumber,

                customStamps: [

                    {

                        customStampName: "Image",

                        customStampImageSource: uploadedFileUrl

                    }

                ]

            });

        }

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mvc_Sample1652285925.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

Okay great thank you! Thats very useful.

How would I insert the image and position it over top of a form field that already exists? For example, I want the image height, width and positioning on the form to match a text box that exists already on the form, so it would 'overlay' that textbox.

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We attempted to create a sample based on your requirements, but encountered an issue where the image was not positioned correctly over the form field. This occurred because form fields are by default placed in the top layer, causing the image to be positioned beneath the form field. We have submitted a feature request to allow customization of PDF Viewer layers, which will be addressed in any of our future volume release. You can track the status of this request using the feedback link provided below.

Feedback Link: Support to Add, Edit and Re-order layers in PDF | Feature Feedback 

Regards,
Sathiyaseelan K

[Joshua Rush]

Okay, thank you for checking that out. 

What if, instead of overlaying the form field, the form field is deleted and the image takes the place of where the form field was? Could that work?

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can achieve this by obtaining the bounds of the form field and then updating it with the bounds and width of the image. Afterward, you can delete the form field using the deleteFormField() function. We've provided the documentation below for reference.

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/form-designer/create-fillable-pdf-forms/create-programmatically?cs-save-lang=1&cs-lang=html#delete-form-field-programmatically 

Regards,
Sathiyaseelan K

[Joshua Rush]

Could you provide an example? I have tried to insert an image and set its bounds, width and height to that of the form field, but the positioning and size of the image do not match the form field I'm deleting.

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

The position issue may have occurred because the bounds provided are in pixels, which need to be converted into points before applying the annotation. Below, we have provided a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Add_Custom_Stamp383216371.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

Awesome, thank you that worked for me! 

I have a couple follow up questions, then I think I should be good and wont bother you anymore :)

1.) When inserting the image, can I make the position fixed? I dont want the user to be able to drag the image around.

2.) If the user decides they dont want that image anymore, they need a way to delete it. How do I programmatically delete the image? Can I add a button in the toolbar that will delete the image thats selected? Im open to suggestions on this piece.

3.) If the user deletes the image, I need the space on the form to be re-filled with the old form field that the image replaced. So the user inserts an image, it takes the place of a form field and that form field is deleted. If the user decides to delete the image thats inserted, the old form field needs to be put back on to the form.

Thank you for your assistance!

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can achieve all these scenarios using the PDF Viewer. We've provided a sample that demonstrates how to add a custom stamp to a form field and delete it if necessary. Additionally, when deleting the form field while adding the custom stamp, you can save a copy of the form field's data into a variable. After deleting the custom stamp, you can add the form field again with the stored data.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Add_Custom_Stamp-59977197.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

Thank you, this is really good stuff!

Is there a way to make the image that is inserted "fixed" in position? Ideally, the user wont be able to drag th

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can achieve this by setting the "isLock" property to true, which prevents the annotation from being modified or moved. Please refer to the documentation for more details on the "isLock" property.

Documentation: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerCustomStampSettings.html 

Regards,
Sathiyaseelan K

[Joshua Rush]

The 'isLock' feature worked, im setting it to 'true' when creating the annotation, but the deleteAnnotationById function no longer deletes the image. I have tried to set isLock = False before I attempt to delete the image, but it still wont work. Is there something else I need to try? 

Here is what im attempting to do:

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can delete a locked annotation by setting its isLock property to false and updating it in the collection using the EditAnnotation method. Below, we've provided a code snippet and sample for your reference.

Code Snippet:

viewer.annotationCollection[i].annotationSettings.isLock = false;

viewer.annotation.editAnnotation(viewer.annotationCollection[i]);

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Custom_Sample-884810291.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

Awesome thank you! 

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We're pleased to hear that your issue has been resolved. Don't hesitate to reach out if you need any further assistance.

Regards,
Sathiyaseelan K