The code sample below will demonstrate how to convert PDF to image(BMP, JPEG, PNG, TIFF, GIF) in JavaScript & jQuery 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, pure JavaScript, and PHP.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ConvertToHtml JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="pdf_renderer.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.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">Render</button>
    </form>

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

    <div id="resultBlock">
        <h2>Result:</h2>
        <img id="result" src="">
    </div>

</body>
</html>

pdf_renderer.js

$(document).ready(function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
});

$(document).on("click", "#submit", function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();

    var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at http://www.bytescout.com/

    var urlUploadFile = "https://bytescout.io/api/v1/file/upload?apiKey=" + apiKey;

    var formData = new FormData($("#form")[0]);

    $.ajax({
        url: urlUploadFile,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (fileId) {
            ConvertToHtml(apiKey, fileId);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function() {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
});


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

    var options = {
        "properties": {
            "pageIndex": $("#pageIndex").val(),
            "resolution": $("#resolution").val(),
            "jpegQuality": 100,
            "rasterOutputFormat": $("#rasterOutputFormat").val()
        },
        "inputType": "fileId",
        "input": fileId,
        "outputType": "link"
    };

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (link) {
            $("#resultBlock").show();
            $("#result").attr("src", link);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function() {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
}