我正在使用带有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)
}
缩略图并不是我需要看到的缩略图大小,我需要看到为什么它被反转和翻转。 缩略图的图片。