Блог

Я использую PDF-файл.JS с помощью DropZone, чтобы сгенерировать эскиз PDF-файла и загрузить его вместе с исходным файлом.

Я пытаюсь понять, почему мой эскиз перевернут и перевернут, который прямо сейчас я установил на 800 пикселей (а не на 96).

У меня есть идея, но я не знаю, как это доказать, данные base64 идут в обратном порядке. Я думаю, что это могло бы привести к этому. Но я понятия не имею, где происходит реверсирование потоковых данных.

 var pdfjsLib = window['pdfjs-dist/build/pdf'];
$("#attachmentDropzone").dropzone({
    url: $("#attachmentDropzone").data('imageaddurl'),
    uploadMultiple: true,
    parallelUploads: 1,
    maxFilesize: 80, // MB,
    init: function () {
        dpzMultipleFiles = this;
        this.on('completemultiple', function (file, json) {
            $('.sortable').sortable('enable');
        });
        this.on("addedfile", function (file) {
            if (file.name.indexOf('.pdf') > 0) {
                console.log('Create thumbnail');
                getArrayBuffer(file).then(function (buffer) {
                    convertPdfToThumbnail(buffer, file);
                });
            }
        }).on('error', function (file, responseText) {
            //Do Something
        });
    }
});
function getArrayBuffer(file) {
    return new Promise(function (resolve, reject) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
            resolve(e.target.result);
        };
        reader.onerror = function (e) {
            reject(e.target.error);
        };
        reader.readAsArrayBuffer(file);
    });
}

function makeThumb(page) {
    // draw page to fit into 96x96 canvas
    var vp = page.getViewport(1);
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 800;
    var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
    return page.render({ canvasContext: canvas.getContext("2d"), viewport: page.getViewport(scale) 
    }).promise.then(function () {
        return canvas;
    });
}

function convertPdfToThumbnail(pdfData, file) {
    console.log('pdfData:', pdfData);
    pdfjsLib.getDocument(pdfData).promise.then(function (doc) {
        var pages = []; while (pages.length < 1) pages.push(pages.length   1);
        return Promise.all(pages.map(function (num) {
            var div = document.createElement("div");
            document.body.appendChild(div);
            return doc.getPage(num).then(makeThumb)
                .then(function (canvas) {
                    div.appendChild(canvas);
                    //use canvas data to add a new file to the dropzone and add the file to the queue 
                    canvas.toBlob(resultBlob => {
                        var name = file.name;
                        name = name.replace(".pdf", "_THUMBNAIL.png");
                        resultBlob.lastModifiedDate = file.lastModifiedDate;
                        resultBlob.name = name;

                        // add converted file to upload
                        console.log('File Converted', resultBlob.name);
                        dpzMultipleFiles.handleFiles([resultBlob]);
                    });
                });
        }));
    }).catch(console.error)
}
 

Миниатюра — это не размер миниатюры, так как мне нужно было понять, почему она была перевернута и перевернута.

Изображение миниатюры