Js 之pdf文件转图片上传

参考网址：https://xxlllq.github.io/pdf2img/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pdf转图片与上传</title>
</head>
<body>
<input id='pdf' type='file' accept="application/pdf">
<div id="upload"></div>
<div id="imgDiv"></div>
</body>
<script src="jquery.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script>
    var timer = null, page = 0, aCanvas = [];
    $(function () {
        clearInterval(timer)
    })
    $("#pdf").change(function () {
        var pdfFileURL = $('#pdf').val();
        if (pdfFileURL) {
            clearInterval(timer);
            page = 0;
            aCanvas = [];
            $("#imgDiv").empty();//清空上一PDF文件展示图
            var files = $('#pdf').prop('files'); //获取到文件
            /*pdf.js无法直接打开本地文件,所以利用FileReader转换*/
            var reader = new FileReader();
            reader.readAsArrayBuffer(files[0]);
            reader.onload = function (e) {
                var typedarray = new Uint8Array(this.result);
                PDFJS.getDocument(typedarray).then(function (pdf) { //PDF转换为canvas
                    $("#imgDiv").css("border", "0"); //清除文本、边框
                    if (pdf) {
                        timer = setInterval(function () {
                            listenCanvas()
                        },1000);
                        var pageNum = pdf.numPages, html = "";
                        for (var i = 1; i <= pageNum; i++) {
                            var canvas = document.createElement('canvas');
                            canvas.id = "pageNum" + i;
                            $("#imgDiv").append(canvas);
                            aCanvas.push(canvas);
                            var context = canvas.getContext('2d');
                            console.log("pageNumber = " + i)
                            openPage(pdf, i, context);
                        }
                        $("#upload").html(html)
                    }
                });
            };
        }
    });
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }

    function listenCanvas() {
        console.log("children = "+$("#imgDiv").children().length)
        console.log("page = "+page)
        if ($("#imgDiv").children().length == page)  {
            clearInterval(timer);
            page = 0;
            var html = "";
            for (var i =0; i < aCanvas.length;i++) {
                console.log(aCanvas[i].id)
                html += `<img width="100" height="150" style="margin-right: 20px" src="`+aCanvas[i].toDataURL()+`"/>`;
                console.log("i"+i);
                let formdata = new FormData();
                formdata.append('file', dataURLtoBlob(aCanvas[i].toDataURL()));
                formdata.append('pagenum', i);
                $.ajax({
                    url: "./upload.php",
                    type: 'post',
                    data: formdata,
                    dataType: 'json',
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success(res) {
                        console.log(res)
                    }
                })
            }
            $("#upload").html(html)
        }
    }

    function openPage(pdfFile, pageNumber, context) {
        var scale = 1.5;
        pdfFile.getPage(pageNumber).then(function(page) {
            viewport = page.getViewport(scale); // reference canvas via context
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function () {
                console.log("pageNumber = " + pageNumber)
                window.page =  window.page + 1
            })
        });
        return;
    };
</script>
</html>