Question

我正在开发网页应用程序，我必须使用 PDF.JS 显示PDF文件，并且我必须绘制一个矩形的区域很少，用户可以点击那些带他去的地方详情页面。直到现在我能够显示pdf并在查看pdf js时找到 canvas.js ，其中所有文本都在画布上使用
showText：函数CanvasGraphics_showText（字形）{} 现在我正在跟踪所有文本，我必须绘制一个矩形，但我面临一些问题要完成它。 showText函数多次调用创建多个矩形。我在功能

中做了以下更改

if(glyphs.length ==10){
          // common case
            var bValue=false;

            glyphs.forEach(function(value, index, ar){
            var str =['d', 'e', 't', 'a','i','l','='];

            if(str.indexOf(value.fontChar)>=0){
                bValue=true;
                }
            });

            if(bValue){
                 ctx.beginPath();
                  ctx.rect(scaledX, 50, 200, 100);
                  ctx.fillStyle = 'yellow';
                  ctx.fill();
                  ctx.lineWidth = 2;
                  ctx.strokeStyle = 'black';
                  ctx.stroke();     
                  ctx.font = '20pt Calibri';
                  // textAlign aligns text horizontally relative to placement
                  ctx.textAlign = 'center';
                  // textBaseline aligns text vertically relative to font
                    // style
                  ctx.textBaseline = 'middle';
                  ctx.fillStyle = 'blue';
                  ctx.fillText("Click", 120, 100);
            }

          }

字形是对象数组，我正在搜索str中定义的值。任何人都可以指出我正确的方向吗？在此先感谢。

Answer 1

不可能直接这样做。从根本上说，Canvas是一个基于位图的图形引擎：它在调用call中时唯一能记住的是它内部像素的值。 您可以绘制文字，但是一旦您完成了该操作，画布就不再知道它的文字了。这就是为什么你无法在图像中搜索它的原因。

最快捷，最简单的方法是跟踪其他地方的文字。 @ ZachSaucier的评论提到了这种可能性。我看到你关注性能，但另一种方法是实现某种OCR算法从位图中提取文本。没有标准的方法可以做到这一点，因此您必须自己实施OCR，并且比将文本存储在变量中要慢得多。

另一个选择是使用SVG而不是Canvas。 SVG不是基于位图的，所以当你将文本放入SVG图像时，引擎可以记住它是＆＃39; s文本，你可以在那里搜索。但是，在SVG中绘制内容与在Canvas中绘制它们有很大不同，因此除非您已经使用了可以使用任何一个库的库，否则您必须重写绘图代码。对于你正在尝试做的事情，这可能是不可行的。

是否可以使用PDFJS在画布上搜索绘图文本？

1 个答案: