Member 13396929 Ответов: 0

Использование pdfjs для преобразования pdf в изображение во время загрузки

Я создал надстройку Excel, в которой пользователь может открыть изображение внутри html-элемента. Моя проблема заключается в том, что многие из моих пользователей хранят свои файлы в формате PDF. Это требует использования PDFjs для преобразования PDF-файла в пригодное для использования изображение (предпочтительно PNG). Я опробовал некоторый код преобразования из Полезный Угол[^] и На GitHub[^Продажи были полезны, но я не уверен, как включить коды покрытия в мой код javascript, используемый для загрузки изображений на вход изображения. Я хочу выполнить преобразование в функции imgupload (перед циклом if (ext == string)), если это возможно. Как я должен это делать?

Вот мои html элементы:
<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>


Вот мой код, используемый для загрузки и отображения изображения:
$('#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);
    }
}


Что я уже пробовал:

Я попытался ввести код Github по ссылке, но это, похоже, ничего не дало.
Полезный код угла работает только после того, как вы визуализируете pdf-файл на холсте.

0 Ответов