JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js" integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ==" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<input type="file" id="fileupload">
<img class="autoThumb" width="512">

JavaScript

$(document).ready(function () {
    $('#fileupload').change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();

            reader.onload = (function(reader) {
                return function() {
                    var contents = reader.result;
                    console.log(contents)
                    var loadingTask = pdfjsLib.getDocument(contents);

                    loadingTask.promise.then(function(pdf) {
                        pdf.getPage(1).then(function(page) {
                            var canvas = document.createElement('canvas');

                            var viewport = page.getViewport({
                                scale: 1,
                            });

                            canvas.height = viewport.height;
                            canvas.width = viewport.width;
                            var context = canvas.getContext('2d');
                            var renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            page.render(renderContext).promise.then(function () {
                                $('.autoThumb').attr('src', canvas.toDataURL("image/jpg"));
                            })

                        });
                    });
                }
            })(reader);
            reader.readAsDataURL(this.files[0]);
        }
    })
})