zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    dts--framework(三)
    dts--tests(三)
    dts--tests(一)
    dts--framework(二)
    dts--framework(一)
    Fiddler(一)
    javascript(二)
    javascript(一)
    scrapy--selenium(二)
    linux安装vmware出现kernel-header问题
  • 原文地址:https://www.cnblogs.com/yang-2018/p/13972242.html
Copyright © 2011-2022 走看看