Add Image to Existing PDF (jQuery) - JavaScript
PDF Add Text, Signatures and Images to PDF sample in JavaScript demonstrating ‘Add Image to Existing PDF (jQuery)’
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
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... <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
var uploadedUrl = result['url']; // Uploaded URL
$("#status").html('Uploading... <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) {
// PDF.co API URL
var cUrl = 'https://api.pdf.co/v1/pdf/edit/add';
// Input data
var data = {
name: 'result.pdf',
url: uploadedUrl,
images: [
{
url: signatureImageUrl,
x: destinationXCoordinate,
y: destinationYCoordinate,
width: destinationWidth,
height: destinationHeight
}
]
};
console.log(data);
$("#status").html('Processing... <img src="ajax-loader.gif" />');
$.ajax({
url: cUrl,
type: 'POST',
headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json' },
data: JSON.stringify(data),
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');
}
});
}
}
});
});
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloud API JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="addImageToPDF.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<p>
<label>Copy-paste your API Key for ByteScout Cloud API here</label>
<input type="text" id="apiKey" placeholder="your cloud API Key" value=""/>
<a href="https://apidocs.pdf.co" target="_blank">no api key yet? sign up here</a>
</p>
<p>
<label>Source PDF File Url</label>
<input type="file" id="SourceFile" placeholder="Upload Source File" />
</p>
<p>
<label>Signature Image Url</label>
<input type="text" id="signatureImageUrl" placeholder="Signature Image Url" style="min-width: 500px;" value="https://bytescout-com.s3.amazonaws.com/files/demo-files/cloud-api/pdf-edit/logo.png" />
</p>
<p>
<label>Destination Co-ordinates - </label>
<b>X: </b> <input type="text" id="destinationXCoordinate" value="400" />
<b>Y: </b> <input type="text" id="destinationYCoordinate" value="20" />
</p>
<p>
<label>Destination Image Size - </label>
<b>Height: </b> <input type="text" id="destinationHeight" value="32" />
<b>Width: </b> <input type="text" id="destinationWidth" value="119" />
</p>
<button type="button" id="submit">Convert</button> <span id="status"></span>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code: <span id="statusCode"></span></h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Output:</h2>
<pre id="inlineOutput"></pre><br/>
<iframe id="iframeResultPdf" src="" width="100%" height="500px"></iframe>
</div>
</body>
</html>
PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.
Download Source Code (.zip)
return to the previous page explore PDF Add Text, Signatures and Images to PDF endpoint
Copyright © 2016 - 2023 PDF.co