Link Search Menu Expand Document

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... &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
                var uploadedUrl = result['url']; // Uploaded URL

                $("#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) {

                        // 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... &nbsp;&nbsp;&nbsp; <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" /> &nbsp;&nbsp;&nbsp;
            <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" /> &nbsp;&nbsp;&nbsp;
            <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.

Get your PDF.co API key here!

Download Source Code (.zip)

return to the previous page explore PDF Add Text, Signatures and Images to PDF endpoint