How to add text and images to PDF in JavaScript and PDF.co Web API

Write code in JavaScript to add text and images to PDF with this step-by-step tutorial

The sample source code below will teach you how to add text and images to PDF in JavaScript. PDF.co Web API is the Rest API that provides set of data extraction functions, tools for documents manipulation, splitting and merging of pdf files. Includes built-in OCR, images recognition, can generate and read barcodes from images, scans and pdf and you can use it to add text and images to PDF with JavaScript.

The SDK samples like this one below explain how to quickly make your application do add text and images to PDF in JavaScript with the help of PDF.co Web API. Just copy and paste the code into your JavaScript application’s code and follow the instruction. Code testing will allow the function to be tested and work properly with your data.

You can download free trial version of PDF.co Web API from our website to see and try many others source code samples for JavaScript.

Try PDF.co Web API today:  60 Day Free Trial (on-premise) or  Web API (on-demand version)

addImageToPDF.js
      
$(document).ready(function () { $("#resultBlock").hide(); $("#errorBlock").hide(); $("#result").attr("href", '').html(''); }); $(document).on("click", "#submit", function () { $("#resultBlock").hide(); $("#errorBlock").hide(); $("#inlineOutput").text(''); // inline output div $("#status").text(''); // status div var apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co/documentation/api var signatureImageUrl = $("#signatureImageUrl").val(); var destinationXCoordinate = $("#destinationXCoordinate").val(); var destinationYCoordinate = $("#destinationYCoordinate").val(); var destinationHeight = $("#destinationHeight").val(); var destinationWidth = $("#destinationWidth").val(); var formData = $("#SourceFile")[0].files[0]; // file to upload $("#status").html('Getting presigned url... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: 'https://api.pdf.co/v1/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true', type: 'GET', headers: { 'x-api-key': apiKey }, // passing our api key success: function (result) { if (result['error'] === false) { console.log(result); var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into $("#status").html('Uploading... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: presignedUrl, // no api key is required to upload file type: 'PUT', headers: { 'content-type': 'application/pdf' }, // setting to pdf type as we are uploading pdf file data: formData, processData: false, success: function (result) { var cUrl = 'https://api.pdf.co/v1/pdf/edit/add?name=result.pdf&type=image&x=' + destinationXCoordinate + "&y=" + destinationYCoordinate + "&width=" + destinationWidth + "&height=" + destinationHeight + "&urlimage=" + signatureImageUrl + "&url=" + presignedUrl; $("#status").html('Processing... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />'); $.ajax({ url: cUrl, type: 'POST', headers: { 'x-api-key': apiKey }, processData: false, contentType: false, //data: oData, success: function (result) { $("#status").text('done processing.'); if (result.error) { $("#errorBlock").show(); $("#errors").text(result.message); } else { $("#resultBlock").show(); $("#inlineOutput").text(JSON.stringify(result)); $("#iframeResultPdf").prop("src", result.url); } } }); }, error: function () { $("#status").text('error'); } }); } } }); });

Try PDF.co Web API today:  60 Day Free Trial (on-premise) or  Web API (on-demand version)

VIDEO

ON-PREMISE VERSION INFORMATION

Get 60 Day Free Trial or Visit PDF.co Web API Home Page

Explore PDF.co Web API Documentation

Get PDF.co Web API Free Training

WEB API

Get Your Free API Key

Explore Web API Documentation

Related Samples: