PDF电子签章,用鼠标拖动印章到指定的位置, 一种在网页PDF中电子签章定位方法 | 您所在的位置:网站首页 › ps移动章的位置 › 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是图章的高度) 还有点小问题 就是如果把鼠标样式变成图章形状(圆形的),点击位置和显示位置有点微小差别,需要微调一下就好。 至此 大概的解决办法就完成了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |