Как конвертировать PDF в PNG с PDFJS при загрузке файла - PullRequest
Новая
       8

Как конвертировать PDF в PNG с PDFJS при загрузке файла

0 голосов
/ 23 октября 2018

Я создал надстройку Excel, где пользователи могут открывать изображение (PNG) при вводе изображения в формате html.Я открываю картинки, нажимая HTML-кнопку с именем «OpenImgUpload», которая вызывает функцию с именем «imgload».Он также запускает ввод html-файла с именем «imgupload», эффективно загружая файл и устанавливая атрибут src для ввода изображения с именем «pic».Как добавленный перк, я добавил код в функцию «imgload», которая изменяет размеры загружаемых изображений до соответствующего размера.Моя главная проблема заключается в том, что большинство моих пользователей хранят PDF-файлы, а не только изображения.Чтобы добиться этого, я попытался использовать библиотеку PDF JS от Mozilla, но без особого успеха.

Чтобы упростить работу для пользователя, я хочу преобразовать одностраничные PDF-файлы моих пользователей в изображения png, когда они нажимают кнопку «OpenImgUpload» (и, таким образом, вызывают функцию «imgload»).Как бы я сделал преобразование таким образом?

вот функция "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);
    } 
}

Я попытался добавить этот код в функцию "imgload": 

else if (ext == 'pdf')
{
    var url1 = window.URL.createObjectURL(selectedFile);
    pdfjsLib.getDocument(url1).then(function (pdf) {
        pdf.getPage(1).then(function (page) {
            var viewport = page.getViewport(1);

            var canvas = document.getElementById('pdf-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
    $('#openImgUpload').attr('href', $('#pdf-canvas').get(0).toDataURL());
    var nom = nombre.replace(/\.[^/.]+$/, "");
    var newfile = nom + ".png";
    // Specfify download option with name
    $('#OpenImgUpload').attr('download', newfile);
}

Я построил этот второй цикл if, ссылаясь на документацию по pdfjs.Это не вызвало ошибки, но, похоже, ничего не произошло.Я думаю, это связано с атрибутом «скачать».В любом случае я пытаюсь избежать загрузки.

...