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");
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
var canvas = document.createElement("canvas");
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;
}
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.