使用PDF.js生成PDF的缩略图，我的缩略图是倒置的。

Question

我正在使用带有DropZone的PDF.JS来生成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)
}

缩略图并不是我需要看到的缩略图大小，我需要看到为什么它被反转和翻转。 缩略图的图片。

- Glen L

Answer 1

嗨，感谢你提供的代码示例，它对我非常有用。 我按照你的答案解决了确切的问题。

然后我按照官方指南 here进行操作。

请注意，它的含义为：

当视口被创建时，一个初始变换矩阵将被创建，该矩阵考虑到所需的比例、旋转和它转换了坐标系（PDF文档中0,0点位于底部左侧，而画布0,0位于顶部左侧）。

应用变换函数后，我得到了正确的方向。

最终代码：

function makeThumb(page) {
  var desiredWidth = 400;
  var viewport = page.getViewport({ scale: 1, });
  var scale = desiredWidth / viewport.width;
  var viewport = page.getViewport({ scale: scale, });
  console.log("Viewport:", viewport)
  // Support HiDPI-screens.
  var outputScale = window.devicePixelRatio || 1;

  var canvas = document.createElement("canvas");
  var context = canvas.getContext('2d');

  canvas.width = Math.floor(viewport.width * outputScale);
  canvas.height = Math.floor(viewport.height * outputScale);
  canvas.style.width = Math.floor(viewport.width) + "px";
  canvas.style.height =  Math.floor(viewport.height) + "px";
  console.log(canvas)
  var transform = outputScale !== 1
    ? [outputScale, 0, 0, outputScale, 0, 0]
    : null;

  var renderContext = {
    canvasContext: context,
    transform: transform,
    viewport: viewport
  };
  return page.render(renderContext).promise.then(function() {
    return canvas;
  });
}

- corbyn3