ByteScout Cloud API Server – Add Text And Images To PDF – JavaScript – Add Image to Existing PDF (jQuery)

Home
/
Articles
/
ByteScout Cloud API Server – Add Text And Images To PDF – JavaScript – Add Image to Existing PDF (jQuery)

printable version:
ByteScout-Cloud-API-Server-JavaScript-Add-Image-to-Existing-PDF-(jQuery).pdf

How to add text and images to PDF in JavaScript using ByteScout Cloud API Server

Learning is essential in computer world and the tutorial below will demonstrate how to add text and images to PDF in JavaScript

Every ByteScout tool includes simple example JavaScript source codes that you can get here or in the folder with installed ByteScout product. ByteScout Cloud API Server is API server that is ready to use and can be installed and deployed in less than 30 minutes on your own Windows server or server in a cloud. It can save data and files on your local server-based file storage or in Amazon AWS S3 storage. Data is processed solely on the API server and is powered by ByteScout engine, no cloud services or Internet connection is required for data processing.. It can be applied to add text and images to PDF using JavaScript.

The following code snippet for ByteScout Cloud API Server works best when you need to quickly add text and images to PDF in your JavaScript application. Follow the instructions from scratch to work and copy the JavaScript code. Complete and detailed tutorials and documentation are available along with installed ByteScout Cloud API Server if you’d like to learn more about the topic and the details of the API.

If you want to try other source code samples then the free trial version of ByteScout Cloud API Server is available for download from our website. Just try other source code samples for JavaScript.

On-demand (REST Web API) version:
Web API (on-demand version)

On-premise offline SDK for Windows:
60 Day Free Trial (on-premise)

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 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://localhost/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true',
        type: 'GET',
        
        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,
                    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://localhost/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',
                            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');
                    }
                });
            }
        }
    });
});