Use Image Processing Service based on simple URL service method

tarekahf

29-06-2018

I found this image processing service which does a good job for processing images:

RSZ.IO - a free responsive image service

I was able to write this sample Javascript code to get the Base64 of the image after using the service:

var canvas = document.createElement("canvas")

var img = new Image();

img.onload = function() {

  canvas.width=img.width;

  canvas.height=img.height;

  var ctx=canvas.getContext("2d");

  ctx.drawImage(img, 0,0, img.width, img.height);

  console.log("Image load success: Data URL of the image:")

  console.log(canvas.toDataURL());

}

//Original image src: https://c1.staticflickr.com/5/4086/5048044997_aa41baa282_o.jpg

img.src = "http://c1.staticflickr.com.rsz.io/5/4086/5048044997_aa41baa282_o.jpg?width=10%&rotate=25"

All you have to do is to upload your images to a public space, and use their service by adding ".rsz.io" to the domain, and the needed parameters at the end of the URL of the original image to be processed.

I am planning to implement this service inside Adobe LiveCycle PDF using Javascript, and I am not sure how. The main problem is that the service is provided via simple URL invoke and not via a standard Web Service. I am not sure if we have a method to invoke URL from inside Adobe LiveCycle PDF, and return the Base64 of the image. Also, if you have other alternatives, that will do the job, it will be fine for me.

I think we can implement a Web Service wrapper over this service, but this requires additional programming effort and requires using a server-side technology.

The bottom line is the following use-case inside PDF:

- User provides link to the URL to the image to be inserted into the Dynamic PDF

- Call Javascript program to compose the new URL using rsz.io to process the image, and get the result Data URL based on Base64 string

- Embed the result image in the designated Image Field.

Appreciate your help.

Tarek

Accepted Solutions (0)

Answers (3)

Answers (3)

_Bruce_Robertson

MVP

04-07-2018

Hi Tarek,

That sounds like the problem I had, with the base64 bug.

The thing I was going to try next was having the server return a hex encoded string, but doing the decoding in JavaScript was slow.

Bruce

tarekahf

04-07-2018

Thanks Bruce,

When I tried using Get in FormCalc for any URL to any image, I get blank results. I think this is because the result is in binary, not in String format. How I can make sure that "Get()" is working at least in FormCalc for image URLs? I tried it over XML URL, and it worked.

Tarek

_Bruce_Robertson

MVP

30-06-2018

Hi Tarek,

I have tried something a little similar to this.  FormCalc has a GET method (which is a HTTP get), so I could get the base64 encoded stream of the image.  I could wrap the FormCalc call so I could call it from JavaScript using this method, Calling FormCalc Functions From JavaScript  from John Brinkman.

The problem I had was handling the response so I could load up the Image object in my form.  Seems, there's a bug in the encode method, see this thread Base64 Encode a PDF attachment .  I did write my own base64 decode in JavaScript but it was too slow.

Reader 9.2 introduced a new API readFileIntoStream , so maybe they fixed it.

Good Luck,

Bruce