Javascript-在pdf页面上加盖印章的位置不正确

Question

我正在开发一个程序，当我启动该程序时，它将把我目录中的pdf文件加载到Web浏览器。 在浏览器中，我可以选择单击图章，然后将其拖到想要的任何位置并在pdf上盖章。 但是，一旦我在邮票上盖章，邮票就会不在我想要的位置上。

以下是示例快照：

以下是粘贴后的输出（这不是我想要的）：

Javascript：

function divMove(e){
        var div = document.getElementById('stamp');
        div.style.position = 'absolute';
        //div.style.top = e.clientY + 'px';
        //div.style.left = e.clientX + 'px';
        var box = div.getBoundingClientRect();
        mouse_top = e.clientY;
        mouse_left = e.clientX;
        var diff_x = mouse_left - box.left;
        var diff_y = mouse_top - box.top;
        div.style.top = ((Number(div.style.top.replace("px", "")) - 1) + diff_y) +"px";
        div.style.left = ((Number(div.style.left.replace("px", "")) - 1) + diff_x) +"px";
        document.getElementById("data").innerHTML =
            "mouse_top:" + mouse_top + "<br>mouse_left:" + mouse_left
    }

    function save(){
        $.ajax({
            type: "GET",
            url: "Save",
            data: {
                mouseTop : (mouse_top/96)*1,
                mouseLeft : (mouse_left/96)*3500
            },
            dataType: "text",
            success: function (response) {
            //use response to set stamp
                if (response != null) {
                    var pdfAsArray = convertDataURIToBinary("data:application/pdf;base64, " + response);
                    loadPDFToViewer(pdfAsArray);
                    //document.getElementById("page-1").getElementsByClassName("pdfCanvas")[0].removeEventListener("click", addStamp);
                } else {
                    alert("Response is null");
                }
            }
        });
    }

后端（java）：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //String src = "C:\\Apache Tomcat\\apache-tomcat-7.0.78\\myWork\\prototype\\haito.pdf";
        //String dest = "C:\\Apache Tomcat\\apache-tomcat-7.0.78\\myWork\\prototype\\test.pdf";

        Properties p = new Properties();
        p.load(new FileInputStream("config.properties"));

        String src = p.getProperty("src");
        String dest = p.getProperty("dest");
        String imgSrc = p.getProperty("stamp");

        PdfDocument doc = new PdfDocument(new PdfReader(src), new PdfWriter(dest));


        ImageData image = ImageDataFactory.create(imgSrc);

        float w = image.getWidth();
        float h = image.getHeight();
        System.out.println("w: " + w + ", h: " + h);





        float mouseX = Float.valueOf(request.getParameter("mouseTop"));
        float mouseY = Float.valueOf(request.getParameter("mouseLeft"));
        System.out.println("top: " + mouseX + ", left: " + mouseY);
        //  adjusted mouse X and mouse Y position




        Rectangle rect = new Rectangle(mouseX ,mouseY  ,w,h);
        PdfStampAnnotation stamp = new PdfStampAnnotation(rect).setStampName(new PdfName("Approved"));
        PdfFormXObject xObj = new PdfFormXObject(new Rectangle(w,h));
        PdfCanvas canvas = new PdfCanvas(xObj,doc);
        canvas.addImage(image,0,0,false);

        //canvas.getGraphicsState();
        stamp.setNormalAppearance(xObj.getPdfObject());
        stamp.setFlags(PdfAnnotation.PRINT);
        stamp.setFlags(PdfAnnotation.LOCKED);
        for(int i=1;i<=doc.getNumberOfPages();i++)
        {
            doc.getPage(i).addAnnotation(stamp);
        }
        //doc.getFirstPage().addAnnotation(stamp);
        FileOutputStream out = new FileOutputStream("config.properties");
        p.setProperty("src", dest);
        p.setProperty("dest", src);
        p.store(out, null);
        out.close();
        doc.close();

我已经在这个问题上奋斗了好几天。 我将不胜感激。 有没有一种方法可以使位置准确？

Answer 1

您的canvas.addImage调用正在传递0、0作为x和y坐标。 相反，您应该从鼠标坐标传递正确转换的坐标。 请记住，在PDF中，所有内容都是从底部开始计算的，因此y = 0是页面的底部，而不是顶部。

另外，也许可以使用iText中的一些示例（如您在此处找到的示例）进行标记，这是一种更好的方法： https : //developers.itextpdf.com/question/how-stamp-image-existing-pdf-and-create-锚

PdfReader readerOriginalDoc = new PdfReader("src/main/resources/test.pdf");            
PdfStamper stamper = new PdfStamper(
    readerOriginalDoc, new FileOutputStream("NewStamper.pdf"));
PdfContentByte content = stamper.getOverContent(1);
Image image = Image.getInstance("src/main/resources/images.jpg");
image.scaleAbsolute(50, 20);
image.setAbsolutePosition(100, 100);
image.setAnnotation(new Annotation(0, 0, 0, 0, 3));
content.addImage(image);
stamper.close();

更新：这是一个有关根据报告的浏览器位置确定PDF位置的示例：

docHeight = something; // however you choose to find the height of your document area
docWidth = something; // however you choose to find the width of your document area
mouse_top = e.clientY;
mouse_left = e.clientX;
percentTop = mouse_top / docHeight;
percentLeft = mouse_left / docWidth;

更新：宽度和高度可能是标记或整个文档中的特定元素。 因此，您可以通过以下方式获取宽度和高度：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

现在将这些百分比传递给后端，您可以反向进行操作以找到您的PDF坐标：

float percentBottom = 100.0 - Float.valueOf(request.getParameter("percentTop"));
float percentLeft = Float.valueOf(request.getParameter("percentLeft"));

现在，底部已转换为您需要从页面底部上升到总高度的正确百分比才能获得正确的顶部位置。 左侧位置应相同。 希望对您有所帮助。