PDF电子签章,用鼠标拖动印章到指定的位置, 一种在网页PDF中电子签章定位方法

目录

 

一、需求

二、最后的效果

三、解决思路


一、需求

         在开发PDF电子签章(电子签名),后台用itextpdf进行签名,前台用pdf.js显示pdf文件,在前台用鼠标拖动印章到指定的位置,点击PDF后,获取鼠标点击坐标,将这个坐标转为itexpdf的坐标体系,然后插入图章。

二、最后的效果

三、解决思路

       这个问题困扰我一周,网上各种资料翻了个遍,都没有解决方案,实在没办法,读了pdf.js 的源码,了解在不同分辨率下,坐标的转换,有了以下思路。

  1、在html中, 用来显示pdf文件,然后利用      viewer.html?file= + encodeURIComponent(src1); 的方式加载文件,这个可以去参考其他文章。

2、在js里,取得viewer里PDFviewer的宽度和高度,注意一下,这个高度是pdf文件的合计高度,比如PDF有10页,高度为7000,那么用这个高度除以总页数,就是每页在浏览器显示的高度了,这个数值是浏览器的坐标体系。方法很简单:

var iFrame = document.getElementById('pdffile'); 

PagesCount  =  $.session.get("PagesCount");//总页数

viewerContainer = iFrame.contentDocument.getElementById('viewer');

var previewheight  = $(viewerContainer).height();
var previewwidth =  $(viewerContainer).width();

previewheight = previewheight / PagesCount;

3、在viewer.js里,取pdf文档每页的宽度 pagewidth和高度pagehight,这个数值是pdf的坐标体系。这个需要viewer.js里取,然后传回到自己的js里。目的是点击pdf时,取点击页的宽度和高度,用来计算。

4、进行坐标转换计算,鼠标点击后,取得鼠标点击坐标。利用Pageheight / previewheight 计算出一个缩放比例,那么

           pdf的X坐标 = 鼠标点击的坐标(positionX) * 缩放比例 就可以了.当然要考虑超出pdf文档的范围,这个自己考虑下就好了,就是判断鼠标位置是否超出了pdf文档的宽度。

            var targetX = positionX * ( Pageheight / previewheight )

           pdf的Y坐标 就比较麻烦了,因为在pdf里,(0,0)是左下角,鼠标点击在网页时,(0,0)是左上角。所以 pdf的Y坐标的计算方法:

var mousepage =  Math.ceil(positionY/previewheight);//判断点击了第几页

var mouse_page_y =  previewheight *  mousepage -  positionY;//转换成点击pdf页的高度

var targetY  = mouse_page_y  * ( Pageheight / previewheight ) - dragImageHeight (dragImageHeight是图章的高度)

还有点小问题 就是如果把鼠标样式变成图章形状(圆形的),点击位置和显示位置有点微小差别,需要微调一下就好。

至此 大概的解决办法就完成了。

你可能感兴趣的:(javascript,jquery,java)