Using pdfjs to convert pdf to image while uploading

See more:

Javascript

jQuery

PDF

HTML5

I have created an Excel Add-in where the user can open an image inside an html element. My issue is that many of my users store their files as PDFs. This necessitates the use of PDFjs to convert the PDF file into a usable image (preferably PNG). I've tried out some conversion code from Useful Angle[^] and Github[^]. The sales were helpful, but I'm not sure how to incorporate the coversion codes into my javascript code used for uploading images to an image input. I want to do the conversion within the imgupload function (before the if (ext == string) loop) if possible. How should I go about doing this.

Here are my html elements:

<canvas id="the-canvas" style="visibility:hidden"></canvas>

<button id="convertPDF" type="button">Convert PDF</button>
<input type="file" id="imgupload" style="display:none" />
<button id="OpenImgUpload">Image Upload</button>

<div class="picontainer" >
    <input id="pic" type="image"/>
</div>

Here is my code used to upload and display the image:

$('#OpenImgUpload').click(imgload);
function imgload() {
    $('#imgupload').trigger('click');
    var pdf = document.getElementById('imgupload');
    var selectedFile = document.getElementById('imgupload').files[0];
    var nombre = selectedFile.name;
    var ext = nombre.split('.').pop();
    if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif')
    {
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        reader.onload = function (e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 1800;
            var MAX_HEIGHT = 1200;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/png");
            document.getElementById("pic").src = dataurl;
        }
        // Load files into file reader
        reader.readAsDataURL(selectedFile);
    }
}

What I have tried:

I tried forcing in the Github code from the link, but it didn't seem to do anything.
The Useful Angle code only works once you render the pdf in a canvas.