The code sample below will demonstrate how to convert PDF to image(BMP, JPEG, PNG, TIFF, GIF) in JavaScript using ByteScout Cloud API (low level). You can set such parameters as image resolution, quality, and image output format.

You can also check how to convert PDF to image in Java, jQuery, and PHP.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PDF Renderer Cloud API Example</title>
    <script src="pdf_renderer.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>

    <form id="form1" enctype="multipart/form-data">
        <p>
            <label>Copy-paste your API Key for Bytescout.IO here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
        </p>
        <p>
            <label>InputFile</label>
            <input type="file" name="file" id="inputFile"/>
        </p>
        <p>
            <label>Output Image Format</label>
            <select id="rasterOutputFormat">
                <option value="BMP">BMP</option>
                <option value="JPEG">JPEG</option>
                <option value="PNG" selected="selected">PNG</option>
                <option value="TIFF">TIFF</option>
                <option value="GIF">GIF</option>
            </select>
        </p>
        <p>
            <label>Resolution</label>
            <input type="number" id="resolution" value="300">
        </p>
        <p>
            <label>Page Index (zero-based)</label>
            <input type="number" id="pageIndex" value="0">
        </p>
        <button type="button" id="submit" onclick="return onSubmit()">Render</button>
    </form>

    <div id="errorBlock" style="display: none">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <div id="errors"></div>
    </div>

    <div id="resultBlock" style="display: none">
        <h2>Result:</h2>
        <img src="" id="image">
    </div>

</body>
</html>

pdf_renderer.js

function onSubmit()
{
    // Hide result blocks
    document.getElementById("errorBlock").style.display = "none";
    document.getElementById("resultBlock").style.display = "none";

    // Get API Key
    var apiKey = document.getElementById("apiKey").value.trim();
    if (apiKey == null || apiKey == "") {
        alert("API Key should not be empty.");
        return false;
    }

    // UPLOAD FILE

    var url = "https://bytescout.io/api/v1/file/upload?apiKey=" + apiKey; // Get your API key by registering at http://www.bytescout.io
    var formData = new FormData(document.getElementById("form1"));

    var httpRequest = new XMLHttpRequest();
    httpRequest.open("POST", url, true);

    // Handle asynchronous response
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) {
            // If OK
            if (httpRequest.status == 200) {
                var uploadedFileId = httpRequest.responseText;
                RenderPDF(apiKey, uploadedFileId);
            }
            // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                // Display error
                document.getElementById("statusCode").innerHTML = httpRequest.status + " - " + httpRequest.statusText;
                document.getElementById("errors").innerHTML = httpRequest.responseText;
            }
        }
    }

    httpRequest.send(formData);

    return true;
}


function RenderPDF(apiKey, uploadedFileId)
{
    var url = "https://bytescout.io/api/v1/pdfrenderer/render?apiKey=" + apiKey;

    var pageIndex = document.getElementById("pageIndex").value;
    var resolution = document.getElementById("resolution").value;
    var rasterOutputFormat = document.getElementById("rasterOutputFormat").value;

    var options = {
        "properties": {
            "pageIndex": pageIndex,
            "resolution": resolution,
            "jpegQuality": 85,
            "rasterOutputFormat": rasterOutputFormat
        },
        "input": uploadedFileId,
        "inputType": "fileId",
        "outputType": "link"
    };

    // Prepare request
    var httpRequest = new XMLHttpRequest();
    httpRequest.open("POST", url, true);
    httpRequest.setRequestHeader("Content-Type", "application/json");
    // Handle asynchronous response
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) {
            // If OK
            if (httpRequest.status == 200) {
                var imageLink = httpRequest.responseText;
                document.getElementById("resultBlock").style.display = "block"; // show hidden resultBlock
                document.getElementById("image").setAttribute("src", imageLink); // Set image link to display
            }
            // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                // Display error
                document.getElementById("statusCode").innerHTML = httpRequest.status + " - " + httpRequest.statusText;
                document.getElementById("errors").innerHTML = httpRequest.responseText;
            }
        }
    }
    // Send request
    httpRequest.send(JSON.stringify(options));
}