Javascript 在上传到s3之前将pdf转换为图像

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

---

根据

pdf.js的第二个示例（在下面的链接中），您还可以使用其base64代码加载pdf文件


要将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

引用自

希望对您有所帮助。
根据
pdf.js的第二个示例（在下面的链接中），您也可以使用base64代码加载pdf文件


要将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

引用自

希望能有所帮助
谢谢@Osama Sheikh。我还有一个疑问，如果我没有显示图像的画布，该怎么办？这是一个div中的一个简单img标记。我们怎么做？不确定图像，为什么不使用画布，如果你不想显示画布，那么就使用css技巧隐藏它（如使用顶部和左侧属性设置固定位置并将元素移出屏幕）我如何在这里获得实际图像，以便将其上传到s3？我已经粘贴了当前使用的代码。我的目标不是立即将其显示在某个位置，而是将其存储为一个n图像，然后在其他位置使用。我猜画布部分只是暂时起作用，因为它没有保存在任何位置。正确吗？检查此线程谢谢@OsamaSheikh。我还有一个疑问，如果我没有一个画布来显示图像，该怎么办。这是一个div中的一个简单img标记。我们该怎么做呢？对图像不太清楚，为什么不直接使用画布呢？如果你不想显示画布，那么就用css技巧隐藏它（如使用顶部和左侧属性设置固定位置并将元素移出屏幕）如何在此处获取实际图像，以便将其上载到s3？我已粘贴了当前使用的代码。我的目标不是立即将其显示在某个位置，而是将其存储为n图像，然后在其他位置使用。我猜画布部分仅在一段时间内有效，因为它没有保存在任何位置。对吗？检查此线程