Populate Image into Word and PDF

Merging of images into templates is one of the most common yet complex tasks.  EDocGen simplifies this a lot. You can easily populate images, QR Code, Bar code, signatures, etc. into your templates.


  1. The system allows you to dynamically set the image dimensions in the template itself. Let's say you have a large image of 2100*1800 size. If you only have a small space for it in the template, you can always set the dimensions 465*400 in the template. The resized image would be populate
  2. Options to populate online images (URL) and from the uploaded images into the system
  3. Batch merge multiple images


The following sections describe how to populate dynamic images into your DOCX and PDF templates.  


Step1: Upload Images into System

If you want to have greater control over the image population, upload the images that are to be merged, into the system. You can restrict your users to use only these images for merging.   Under the template in left-nav, you find a sub-tab for images. Click on the '+' icon to upload images.

   


Step2: Add relevant tags to the template


The next step is to add dynamic tags in the template at the location where you want the merged images to appear.  Open your Word/PDF editor and


{%photoimg1 type=”image” height=”400” width=”600”}

{%photoimg2 type=”image” height=”600” width=”400”}


{%photoimg1 } is the image tag id. You can use any name of your choice. Next, specify the height and width of the image.

Tag id is a single word without spaces. Ex: photoimg, photo_img, photo-img

Here we're merging two images.


Step3: Merge image into PDF and Word Templates

If you are using the fillable form (data capture form) to populate template, you would see drop-downs of images, you uploaded into the system. Select from the drop-down to populate them into the template.




If you're looking to merge images  JSON data, please see the below example. Here we're populating images through  URL.


[
    {
        "Name": "Rick & Morty 1",
        "image1 type="image" height="400" width="600"": "                https://images-na.ssl-images-amazon.com/images/I/91MteSqsrJL.jpg",
        "image2 type="image" height="600" width="400"": "https://images-na.ssl-images-amazon.com/images/I/91MteSqsrJL.jpg"     
    }
]
              

For the above image tags, this produces identical images with different dimensions. Make sure to use the same dimensions in your template as well. If it doesn't match, the image wouldn't be populated.


If you're planning to use uploaded images for the JSON population, the following are the two approaches.

  1. Simply pass the image id you received for uploaded the image in the JSON file for image tag id value.
  2. To go URL way, you can get the image URL through https://app.edocgen.com/api/v1/image/download/<image-id>?access_token=<token> and use it in your JSON input


For XML and Excel, though you can populate the image as-is, not possible to set the dimensions. Make sure not to use image dimensions in the template.


Base64 Image population through API

Below is an example code. It downloads the image and renders it into the canvas. The same canvas will be uploaded to EDocGen as an image.


<html>
<body>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
<script>
token = "uHCJRs5JWnZ06HWsecs"; //use your token
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
ctx.drawImage(img, 0, 0);
c.toBlob(function(blob){
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('image', blob, 'filename.png');
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
var imageId = JSON.parse(this.responseText).id;
console.log('uploaded image id:', imageId)
alert(imageId);
}
});
xhr.open("POST", "https://app.edocgen.com/api/v1/image");
xhr.setRequestHeader("x-access-token", token);
xhr.send(data);
});
}
img.src = 'https://thumbs.dreamstime.com/b/good-morning-sign-board-arrow-good-morning-sign-board-arrow-beach-sunshine-background-120878134.jpg';
</script>
</html>