11

我试图使用 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
}

下面是使用 iText 处理冲压部分的后端代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  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);

  //Rectangle rect = new Rectangle(Math.abs(mouseX-600)+w,Math.abs(mouseY-300)+h,w,h);
  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();

  //first read the file to byte array
  try {
    File file = new File(dest);

    if(file.canRead()) {
      String base64File;

      //define the byte array to store the file
      byte[] byteFile = new byte[(int)file.length()];

      //define the stream to read the pdf
      ByteArrayOutputStream bytes = new ByteArrayOutputStream();
      FileInputStream fis = new FileInputStream(file);

      //convert the read file's stream byte to base64
      //important for streaming the pdf bytes back to the front
      Base64OutputStream baos = new Base64OutputStream(bytes);

      int len;

      //read the byte from file then write it through stream to byteFile variable
      //read is reading one by one
      while((len = fis.read(byteFile)) > 0){
        baos.write(byteFile,0,len);
      }
      baos.flush();

      // turn the read byte into string
      base64File = bytes.toString("UTF-8");

      bytes.close();
      baos.close();
      fis.close();

      response.setContentType("application/pdf");
      response.setHeader("Content-Disposition","inline");
      response.setCharacterEncoding("UTF-8");
      response.setContentLength(base64File.length());
      //write the base64 string to the response message body
      response.getWriter().write(base64File,0,base64File.length());
              //response.getOutputStream().write(base64File,0,base64File.length());

    } else {
      response.setCharacterEncoding("UTF-8");
      response.getWriter().write("File is unreadable!");
    }

  } catch(FileNotFoundException e) {
    e.printStackTrace();
  } catch(Exception e) {
    e.printStackTrace();
  }
}

这是我要标记的位置：

这是我要盖章的位置

输出不是我所期望的：

输出不是我预期的

4

2 回答 2

3

此代码使用窗口的百分比将其转换为用户单位。

更新：

document.getElementById("data").innerHTML = "mouse_top:" + mouse_top
+ "<br>mouse_left:" + mouse_left

至

document.getElementById("data").innerHTML = "mouse_top:" +
(mouse_top\window.innerHeight) + "<br>mouse_left:" + (mouse_left\window.innerWidth)

在后端：

Rectange size = doc.getPage(1).getPageSize();
Rectangle rect = new Rectangle(mouseX*size.getHeight(),mouseY*size.getWidth(),w,h);
于 2018-08-21T13:34:34.317 回答
1

问题的关键在于能够确定要包含在 PDF 中的图章相对于 PDF 页面的位置和大小，以百分比表示。这正是@rossfrank 在他的回答和评论中试图解释的。

如果您可以控制您使用的 PDF 预览的位置来计算应放置图章的位置，这可能非常容易，例如，只需考虑某个框架的宽度和高度，如果您正在使用某些框架甚至是 div一种用于预览 pdf 不同页面的自定义元素，或者非常复杂，如果它取决于实际浏览器大小、应用的缩放级别等。最好的建议是尝试控制预览 PDF 的位置。

可能您还需要将此参考宽度和高度传递给您的 servlet，因为您似乎只知道后端图像的尺寸。如果有必要防止溢出等。

获得这些值后，代码应该很简单：

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");

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

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"));

// As explained, get reference width and height values
// They can be a frame dimension, a div width and height, etcetera
float referenceWidth = Float.valueOf(request.getParameter("referenceWidth"));
float referenceHeight = Float.valueOf(request.getParameter("referenceHeight"));

// Normalize values: it can be done in the client side as well
float top    = mouseY / referenceHeight;
float left   = mouseX / referenceWidth;
float width  = w      / referenceWidth;
float height = h      / referenceHeight;

// Just in case, take into account page rotation
Rectangle pdfRectangle = reader.getPageSizeWithRotation(1);

float pdfWidth = pdfRectangle.getWidth();
float pdfHeight = pdfRectangle.getHeight();

// Please, pay attention to this code, it seems that changed in itext7
// Any way, any change should be easy
float llx = pdfWidth * left;
float lly = pdfHeight * (1 - top - height);
float urx = llx + (pdfWidth * width);
float ury = lly + (pdfHeight * height);

Rectangle rect = new Rectangle(llx, lly, urx, ury);

PdfStampAnnotation stamp = new PdfStampAnnotation(rect).setStampName(new PdfName("Approved"));
PdfFormXObject xObj = new PdfFormXObject(new Rectangle(width,height));
PdfCanvas canvas = new PdfCanvas(xObj,doc);
canvas.addImage(image,0,0,false);
//...

这个相关的SO 答案提供了对该问题的进一步见解。

于 2021-08-03T21:49:20.053 回答