Acrobat-resizing image in form field

[ex83181920]

I've been asked to create a series of editable PDFs in which the user (in Acrobat) can press a button, upload a logo image, and have it be automatically placed onto the PDF.

I've solved the bulk of this problem with the usual JavaScript snippet:

event.target.buttonImportIcon();

This works well enough to allow me to upload images into the form field, but because company logos vary wildly in dimensions, design, etc., it's been difficult for me to get the logos to resize and look good. I've already explored the settings under "Icon Placement," under "Button Properties," but they simply don't work well enough.

Is there another way I can get my logo images to resize in a more effective manner? I'm thinking there might be some kind of JavaScript I can write to force the image to scale, but I'm not sure where I'd start.

Thanks!

[try67]

JS can't do more than what can be done using the options you see under the

Properties dialog.

On Tue, Jun 6, 2017 at 10:36 PM, ex83181920 <forums_noreply@adobe.com>

[ex83181920]

Is JavaScript in Acrobat limited? I'm fairly sure JavaScript on a web page for example could do something like this.

[try67]

Yes, it's quite limited, and very different from the web-page variety...

[richardn41953489]

Hi all.  I need to resize an image field (multiple) using javascript.  The enlarged image is high res and hidden (at run time) to the user until a mouse over on another field.  When the mouse over occurs, I am unhiding the field, and that works fine ...

The issue is that I want to automate the resize during the form preparation.  The enlarged image covers nearly the entire screen when I am preparing the report, so I have to keep it (and others) in a reduced form to see the rest of the form.  I then need to manually enlarge all the images and set them to "hidden" before distributing the report.  I want to automate this "prep" process.

I have tried using the [.rect] property to do this, but I don't know if that is the way to go.  It may just be a syntax issue ... or maybe it can't be done.

If anyone can provide a clue as to how to approach this ... please let me know.

Cheers!

[Thom Parker]

Yes, there are things you can do.

First, to get the real dimensions of an image, use this code

var oIcon = this.getField("ButtonField").buttonGetIcon();

var stmIcon = util.iconStreamFromIcon(oIcon);

var width = stmIcon.width;

var height = stmIcon.height;

You can then uses these dimensions to resize the button using the "rect" property for best viewing. You'll need the scripts set the button locations so they don't overlap each other or other content on the page. 

[richardn41953489]

Thanks for the response Thom.

I think I need to clarify ...

The functionality that the user sees is as follows ...

On the mouse enter of a thumbnail image field, I unhide a large, higher res field with the same image.  On the mouse exit, I hide the larger image, which allows the user to continue navigating the report.

So here is the issue ...
I have many images that will be presented in the same way on the form.  When I am creating (editing) the form for a unique user, the "Large" image fields block editing capabilities, so what I do is to set the image in small (thumbnail size) image fields.  When I am done editing the form for distribution, I need to resize and reposition all the large image fields, which is tedious and time consuming.

I have a script that I run to perform other "prep" functions (i.e. hiding fields, setting fields = read only, etc.).  I want to add functionality to that script to resize and reposition all of the (large) image fields at predetermined size and location.  This is the last step in my report preparation.  I can then distibuite.

So my issue is in programatically resizing/repositioning the image "fields" and not the field content (image).

I hope that this clarifies.  Any additional help would be greatly appreciated.  Thanks!!

[Thom Parker]

Images are scaled to fit the button field where they are displayed, so resizing the button field is resizing the image. I provided you with code for determining the real dimensions of the image. With this information you know both the aspect ratio of the image and it's maximum resolution for good viewing.

So what is the "predetermined size and location"? If this infomation is already known, then just risize and position the button fields? If it's not known, then is this the info you are trying to find? What exactly is the issue you are trying to solve?

[richardn41953489]

The "predetermined size and position" that I am referring to are the dimensions/position of the field ... not the image in the field.  I was attempting to set these using the [.rect] property, but was unable to do so.  I know what the values need to be, but want to assign thru a script, instead of doing it manually.  Hope this makes it clearer.  Thanks!

[Thom Parker]

The "rect" property of the button where the image is displayed is the position and size of the image on the page. There is no difference between the two.

So, what is the issue you are having with using the "rect" property?

[richardn41953489]

I believe I'm running into syntax issues.  

I'm trying to execute the following as a test:

var c = this.getfield("LG1_af_image");
var crect = c.rect;
crect[0] += 10;
crect[2] += 402;
c.rect = crect;

Getting:

TypeError: this.getfield is not a function
11:AcroForm:CBEdit:Annot2:MouseUp:Action1

in the debugger.

[Thom Parker]

You should have said that in the first place,

the "f" in field is capitalized.

this.getField();

It's refered to as camel case, and is the common style with names in JavaScript 

[richardn41953489]

Thanks very much Thom!

I'm obviously new to JS, but have done my share of coding.  Hungarian Notation is what I know it as.  I should have caught that.  Thanks for your patience.

I do have one more issue that I'm trying to get over ... I'll try to be as clear as possible right up front.

This refers to the same part of the report with the images ...

On the mouse enter of an image field with a small low res "thumbnail", I unhide the large, higher res field with the same image.  On the mouse exit, I hide the larger image, which allows the user to continue navigating the report.

This all works fine, but there is a glitch that I need to get over if possible.  I have done some extensive searching on the web, but can't find a solution.  The additional issue is ...

While in the "mouse enter" field, if the user scrolls, the mouse exit can't be fired because the cursor is no longer on the field.  Therefore the "Large" image remains unhidden.  The only way during runtime for the user to "hide" the "large" image is to mouse over the corresponding thumbnail image to fire the exit event.

One solution would be to disable page scrolling as part of the "mouse enter" and enable on "mouse exit".  ... What I have seen online is that this is very involved at best, and maybe not possible at all.

Another solution would be to detect scrolling and execute the same code that is in the "mouse exit" event.

Thoughts??  Thanks again!

[Thom Parker]

Add both a MouseExit and MouseUp script the to larger image so moving off or clicking on the larger image hides it.

You can learn all about Acrobat scripting here: https://www.pdfscripting.com

[richardn41953489]

You're the man Thom!  Excellent work-around!!  Thank you very much!