前端解析pdf文件内容二维码

samllys

已于 2022-08-09 11:55:25 修改

阅读量825

点赞数 2

文章标签：前端 javascript 开发语言

于 2022-08-09 11:45:35 首次发布

本文链接：https://blog.csdn.net/qq_40187000/article/details/126244383

版权

文章目录

解析pdf内容，并解析二维码
运行结果
总结

解析pdf内容，并解析二维码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" http-equiv="Access-Control-Allow-Origin" content="*" />
    <title></title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.min.js"></script>
    <script src="/jsQR.js"></script>
    <script id="script">
        // 设置 workerSrc 
        pdfjsLib.GlobalWorkerOptions.workerSrc =
            'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.worker.min.js';

        // 加载远程PDF
        var loadingTask = pdfjsLib.getDocument({
            url: 'http://127.0.0.1:9999/b.pdf',

        });
        loadingTask.promise.then(function (pdf) {

            pdf.getPage(1).then(function (page) {

                page.getOperatorList().then(function (ops) {
                    var objs = [];
                    for (var j = 0; j < ops.fnArray.length; j++) {
                        //解析出pdf内容为image类型
                        if (ops.fnArray[j] == pdfjsLib.OPS.paintImageXObject) { 
                            var op = ops.argsArray[j][0]
                            objs.push(ops.argsArray[j][0])
                            var img = page.objs.get(op);
                            var scale = img.width / page.view[2];
                            var viewport = page.getViewport({ scale: scale });
                 
                             //创建canvas，填充数据
                            var canvas = document.createElement('canvas') 
                            document.body.append(canvas)
                            var ctx = canvas.getContext('2d');
                            var imageData = ctx.createImageData(img.width, img.height);
                            var imageBytes = imageData.data;

                            for (var y = 0, k = 0, jj = img.width * img.height * 4; y < jj;) {
                                imageBytes[y++] = img.data[k++];
                                imageBytes[y++] = img.data[k++];
                                imageBytes[y++] = img.data[k++];
                                imageBytes[y++] = 255;
                            }

                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.putImageData(imageData, 0, 0);
                            
                            //使用jsQR，解析iamge
                            code = jsQR(imageData.data, img.width, img.height);
                            if(code){
                                console.log(code.data)
                            }
                         
                        }
                    }

                })
            })
    </script>
</body>

</html>