How to Convert a PDF to a PNG Image Array using JavaScript
While PDF is an extremely flexible document format, PNGs can be more “lightweight” and accomplish the same goal as sharing the equivalent rasterized PDF document. When the use case calls for a PDF to PNG conversion, we have you covered — our PDF to PNG API is super easy to implement & use. This API will generate PNG images for each individual page within an input PDF document and return a directly proportionate image array. Below, you can use the copy & paste code examples provided in JavaScript to easily structure your API call. Other than that, all you’ll need is an API key, which you can obtain by registering a free account on our website.
Let’s start with code examples that will structure your call using the XHR feature built into JavaScript. To go that route, copy the below:
var data = new FormData();
data.append("inputFile", fileInput.files[0], "file");
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});xhr.open("POST", "https://api.cloudmersive.com/convert/pdf/to/png");xhr.setRequestHeader("Apikey", "YOUR-API-KEY-HERE");xhr.send(data);
You can also use this API with jQuery. To install the jQuery library, first run the below command:
bower install jquery
And then copy the below code examples:
var form = new FormData();
form.append("inputFile", fileInput.files[0], "file");var settings = {
"url": "https://api.cloudmersive.com/convert/pdf/to/png",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "multipart/form-data",
"Apikey": "YOUR-API-KEY-HERE"
},
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
};$.ajax(settings).done(function (response) {
console.log(response);
});
With that, you’re all set. Simply include your API key in the above examples where indicated, and you’re good to go.