在將其上傳到 s3 之前將 pdf 轉換為圖像

Question

我在 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.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});
        });

Answer 1

根據pdf.js的第二個示例（在下面的鏈接中），您還可以使用其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

參考如何在JavaScript中將文件轉換為base64？

希望能幫助到你

Answer 2

我在上面的鏈接上構建了一個功能，檢查一下

堆棧閃電戰