Add Image as annotation using JavaScript  SOLVED

Forum for the PDF-XChange Editor - Free and Licensed Versions

Moderators: PDF-XChange Support, Daniel - PDF-XChange, Chris - PDF-XChange, Sean - PDF-XChange, Paul - PDF-XChange, Vasyl - PDF-XChange, Ivan - Tracker Software, Stefan - PDF-XChange

HQue
User
Posts: 16
Joined: Fri Mar 14, 2025 2:34 pm

Add Image as annotation using JavaScript

Post by HQue »

Hello there,

is it possible to add an image that is placed in my "Stamp" folder as an annotation?
I dont want to place use a stamp because I want to add a text box and so on together with the image ...

So sth like this (pseudo code).

I don't know how to load the image and how to place it as an annotation

Code: Select all

function addImageAnnotation(doc) {
    const imagePath = "...";

    // Load the image from the full path
    const img = app.loadImage(imagePath);

    if (!img) {
        console.println("❌ Failed to load image.");
        return;
    }

    console.println("✅ Image loaded successfully.");

    // Set dimensions and position
    const width = 100;   // Adjust width as needed
    const height = 50;   // Adjust height as needed
    const x = 100;       // X position on page
    const y = 100;       // Y position on page

    // Create the image annotation
    const imageProps = {
        type: "Image",
        rect: [x, y, x + width, y + height],
        name: "MyImageStamp",
        flags: 0,
        contents: "Inserted image",
        appearance: {
            normal: {
                type: "Image",
                image: img
            }
        }
    };


    doc.iBeamAnnot = doc.addAnnot(imageProps);

    if (stamp) {
        console.println("✅ Stamp annotation added successfully.");
    } else {
        console.println("❌ Failed to add stamp annotation.");
    }
}


All the best,

Niklas
User avatar
Daniel - PDF-XChange
Site Admin
Posts: 11036
Joined: Wed Jan 03, 2018 6:52 pm

Re: Add Image as annotation using JavaScript

Post by Daniel - PDF-XChange »

Hello, HQue

I am not certain about loading it exclusively via JS without the use of a stamp, but I am not certain that it is necessary to do so anyway, our new stamp helper tool can be used to simplify this. It is accessible from the "stamps palette > New > custom stamp":
image.png
image(1).png
Once you are here, you can simple paste the image into your stamp, and then add dynamic elements, such as a text entry field, which will prompt you to enter text at the time of placement:
image(2).png
Then you can customize the placed text formatting to ensure it looks good on you image. In my case I have removed the stroke color (making the Field border invisible):
image(3).png
And changed the font and font color to better contrast the background:
image(4).png
Then when I place the stamp in the document I am prompted to input text and the output shows:
image(5).png
Once you have completed this process, you can place that image at any time, and adjust the text to your current needs at any time.

Kind regards,
You do not have the required permissions to view the files attached to this post.
Dan McIntyre - Support Technician
PDF-XChange Co. LTD

+++++++++++++++++++++++++++++++++++
Our Web site domain and email address has changed as of 26/10/2023.
https://www.pdf-xchange.com
Support@pdf-xchange.com
HQue
User
Posts: 16
Joined: Fri Mar 14, 2025 2:34 pm

Re: Add Image as annotation using JavaScript

Post by HQue »

Thanks Daniel!

I followed you apporach but for me its not possibel to change the text field after the stamp is created.
That was always the problem for me with stamps
User avatar
Jordan - PDF XChange
Site Admin
Posts: 254
Joined: Mon Jul 03, 2023 3:10 pm

Re: Add Image as annotation using JavaScript

Post by Jordan - PDF XChange »

Hello

The option to Edit stamps was added with our new build 10.6.0.396 as you can see here:
image.png
https://www.pdf-xchange.com/product/pdf ... or/history
If you are using any of the older versions that will not be available.
You do not have the required permissions to view the files attached to this post.
Best regards,
Jordan
HQue
User
Posts: 16
Joined: Fri Mar 14, 2025 2:34 pm

Re: Add Image as annotation using JavaScript

Post by HQue »

Hi Jordan
Thanks for your answer
I don't think that this is want I want to do. I just updated and with the updated version it's indeed possible to edit dynamic stams in the palette but not the ones that are already placed in the document.

If i could insert an image with JavaScript I could easily add an editable text field to it
But I dont know how to add the image
User avatar
Daniel - PDF-XChange
Site Admin
Posts: 11036
Joined: Wed Jan 03, 2018 6:52 pm

Re: Add Image as annotation using JavaScript

Post by Daniel - PDF-XChange »

Hello, HQue

If you follow the steps I mentioned above, you can later "flatten" the stamp you have placed, which converts it into base content, and then allows the text to be edited directly with the Edit text tool:
(This is a Gif animation, click to play)
PDFXEdit_s90ou7rXiW.gif
Once you have done this, the text will remain editable any time you enable the Edit text tool.


Alternatively, If you only need to add this particular image to a document once, you can use the "add > image" tool then select the image to place it as base content:
image.png
Then once the image is placed, you can use the "add >text" or "typewriter" tools to place the text which remains accessible for later editing.

It is very important to know that JS can only directly place comments, and the only way to place an image as a comment is as a stamp. In turn, if you were to use JS for this, you would end up with two comments in the same location, which could make selection and later editing a tad more difficult.

Kind regards,
You do not have the required permissions to view the files attached to this post.
Dan McIntyre - Support Technician
PDF-XChange Co. LTD

+++++++++++++++++++++++++++++++++++
Our Web site domain and email address has changed as of 26/10/2023.
https://www.pdf-xchange.com
Support@pdf-xchange.com
HQue
User
Posts: 16
Joined: Fri Mar 14, 2025 2:34 pm

Re: Add Image as annotation using JavaScript

Post by HQue »

Hi Daniel,
thanks a lot for your answer! And sorry for the late reply.
I just looked into it and yes that kind of works but with flatten the image is embedded into the document which makes later editing harder.

Having them as two annotations above eachother is not a problem.
I know how to add the text annotation but not how to add the stamp/image one (from an image in a "stamp" folder for example).
Could you help me out with this one?

Best,

Niklas
User avatar
Stefan - PDF-XChange
Site Admin
Posts: 19868
Joined: Mon Jan 12, 2009 8:07 am

Re: Add Image as annotation using JavaScript  SOLVED

Post by Stefan - PDF-XChange »

Hello HQue,

Provided that your image is already added as a stamp - you should be able to add the Stamp annotation after grabbing it's name and dimensions (you can e.g. have a stamp selected, and then run this JS:
console.println(this.selectedAnnots[0].AP);
console.println(this.selectedAnnots[0].rect);

To get the unique stamp name and it's dimensions.

Once you have that - you can use this.addAnnot to add a new one from the same initial stamp template.

Kind regards,
Stefan
HQue
User
Posts: 16
Joined: Fri Mar 14, 2025 2:34 pm

Re: Add Image as annotation using JavaScript

Post by HQue »

Hi Stefan,

Awesome!!
That was exactly what I needed
Thanks a lot!
User avatar
Radi - PDF-XChange
Site Admin
Posts: 617
Joined: Tue Mar 03, 2015 12:46 pm

Add Image as annotation using JavaScript

Post by Radi - PDF-XChange »

:)