Js 之pdf文件轉圖片上傳

本文轉載自查看原文 2020-11-14 08:49 855 Js

參考網址：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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS逐頁轉pdf文件為圖片格式 pdf流文件轉圖片 Vue.js +pdf.js 處理響應pdf文件流數據，前端轉圖片預覽不可下載 python 文件夾下的圖片轉PDF 前端PDF文件轉圖片方法 C# PDF文件轉圖片 js實現多文件上傳（一）-- 圖片轉base64回顯 POI根據模板導出word文件，以及word轉PDF，PDF轉圖片再插入PDF中（防止PDF被修改） Python | 圖片轉pdf Java PDF轉圖片