在上传到 s3 之前将 pdf 转换为图像
Convert pdf to image before uploading it to s3
我在 React js 中有一个当前设置,如果文件格式是 pdf、视频、音频等,我使用分段上传将文件上传到 s3 buffer.However。我想在上传到之前将其转换为图像s3;将其视为缩略图 generation.I 已经阅读了很多相关内容,但找不到适合我需求的正确解决方案,请问有人可以提出一些可能的解决方案吗?(根本不涉及后端)
PS:I 看过 pdf.js 但不知道如何使用它,而我的文件类型是缓冲区,它是什么类型 return 我可以用同样的方式将它上传到 S3.A小例子会帮助英里。提前致谢!!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
根据 pdf.js
的第二个示例(在下面的 link 中),您还可以使用其 base64 代码加载 pdf 文件。
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
并且要将 pdf 文件加载为 base64 代码,您实际上可以像这样使用 HTML5 FileReader
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
引用自
希望对您有所帮助
我在 React js 中有一个当前设置,如果文件格式是 pdf、视频、音频等,我使用分段上传将文件上传到 s3 buffer.However。我想在上传到之前将其转换为图像s3;将其视为缩略图 generation.I 已经阅读了很多相关内容,但找不到适合我需求的正确解决方案,请问有人可以提出一些可能的解决方案吗?(根本不涉及后端) PS:I 看过 pdf.js 但不知道如何使用它,而我的文件类型是缓冲区,它是什么类型 return 我可以用同样的方式将它上传到 S3.A小例子会帮助英里。提前致谢!!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
根据 pdf.js
的第二个示例(在下面的 link 中),您还可以使用其 base64 代码加载 pdf 文件。
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
并且要将 pdf 文件加载为 base64 代码,您实际上可以像这样使用 HTML5 FileReader
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
引用自
希望对您有所帮助