当前位置 博文首页 > 文章内容

    Js 之pdf文件转图片上传

    作者: 栏目:未分类 时间:2020-11-14 9:00:16

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    <!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="imgDiv"></div>
    </body>
    <script src="jquery.js"></script>
    <script src="pdf.js"></script>
    <script src="pdf.worker.js"></script>
    <script>
        $("#pdf").change(function () {
            var pdfFileURL = $('#pdf').val();
            if (pdfFileURL) {
                $("#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) {
                            var pageNum = pdf.numPages;
                            for (var i = 1; i <= pageNum; i++) {
                                var canvas = document.createElement('canvas');
                                canvas.id = "pageNum" + i;
                                $("#imgDiv").append(canvas);
                                var context = canvas.getContext('2d');
                                openPage(pdf, i, context);
                            }
                        }
                    });
                };
            }
        });
        function openPage(pdfFile, pageNumber, context) {
            var scale = 2;
            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 () {
                    canvas.toBlob(function (blob) {
                        let formdata = new FormData();
                        formdata.append('file', blob);
                        //文件上传
                        $.ajax({
                            url: "url",
                            type: 'post',
                            data: formdata,
                            dataType: 'json',
                            async: false,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success(res) {
                                console.log(res)
                            }
                        })
                    })
                })
            });
            return;
        };
    </script>
    </html>