Преобразуйте PDF в изображение перед загрузкой в s3
У меня есть текущая настройка в React js, где я загружаю файлы в s3, используя многостраничную загрузку в качестве буфера. Однако, если формат файла - pdf, видео, аудио и т. д., Я хочу преобразовать его в изображение перед загрузкой в s3; Думайте об этом как о генерации эскизов. Я много читал об этом, но не смог найти правильного решения для моих нужд, может ли кто-нибудь предложить какое-то возможное решение? (где серверная часть вообще не задействована) PS: Я просмотрел pdf.js, но не знаю, как его использовать, в то время как мой тип файла - буфер, и какой тип он вернет, и могу ли я таким же образом загрузить его на S3. Небольшой пример поможет милям. Заранее спасибо !!
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.info('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.info('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});
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Согласно 2-му примеру pdf.js (по ссылке ниже) вы также можете загрузить файл pdf, используя его код base64.
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.info('PDF loaded');
});
И чтобы загрузить файл pdf как код base64, вы можете использовать HTML5 FileReader следующим образом
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.info(reader.result);
};
reader.onerror = function (error) {
console.info('Error: ', error);
};
}
var file = document.querySelector('#files > input[type = "file"]').files[0];
getBase64(file); // prints the base64 string
Ссылка из Как преобразовать файл в base64 в JavaScript?
Надеюсь, поможет
Не уверен в изображении, почему бы просто не использовать холст, и если вы не хотите показывать холст, просто скройте его с помощью трюков css (например, установка фиксированного положения и перемещение элемента за пределы экрана с использованием свойств top и left)
Как мне получить здесь реальное изображение, чтобы я мог также загрузить его на s3?
Я вставил код, который использую в настоящее время. Моя цель - не показать его сразу где-нибудь, а сохранить его как изображение, а затем использовать в другом месте. Я думаю, что часть холста работает только на время, потому что это не так. где угодно сохраняется.
Отметьте эту ветку stackoverflow.com/questions/12921052/…
Спасибо @Osama Sheikh. У меня есть еще одно сомнение, что, если у меня нет холста, на котором я показываю изображение. Это простой тег img внутри div. Что делать?