电子签章

记录背景

随着互联网和无纸化的推行，现在各种操作电子化已经逐渐变成常态。各种单据电子化，合同电子化，因此出现了电子签章的概念。最近的工作就是在做一个电子签章系统，在这里记录一下掉头发的经历吧。

需求描述

电子签章系统的一个功能，在网页预览用户上传的文件，并拖拽签名或公章图片到文档上，完成模拟盖章动作，并获取盖章的坐标信息。说到这里，是不是会有小伙伴觉得这有什么难度吗？当然，没有[笑哭]。问题在于，预览的文件在页面可以进行缩放，而缩放前后，盖章位置相对于纸张的比例的不变的，但我们在页面上获取到的坐标位置是相对于网页来说的，要将网页坐标转换成其在纸上上的坐标，确实有一点麻烦。

知识普及：offset、client分别是到哪里的距离

一张图说明clientX、offsetX、screenX、pageX、x的区别

（图片来源：https://blog.csdn.net/weixin_41342585/article/details/80659736）

实现思路

不考虑缩放问题的情况下，首先我们可以获取到印章所在地方的坐标，记作(px, py)。
由于我们最终要的坐标是相对于印章后方的文档的，因此此处 px, py的计算方式如下：

px = seal.offsetLeft - PDFDom.offsetLeft;
py = seal.offsetTop - PDFDom.offsetTop;

这时得到的坐标就是我们要的坐标

当文档发生缩放后，缩放前的文档宽度和缩放后的文档宽度的比应该与缩放前的坐标和缩放后的坐标比。

// originPageWidth 表示文档的原始宽度，pageWidth， 表示缩放后文档的宽度，px表示从页面获取的横坐标，（未发生缩放是就是我们要的坐标，发生缩放后就是缩放后的坐标，那么我们要的坐标就是页面获取的坐标乘一个系数）；x表示目标坐标
x = originPageWidth / pageWidth * px
// 同理，可获得y坐标
y = originPageWidth / pageWidth * py

边角

似乎到这里为止，我们要计算的数据都已经得到了；但是我们还需要考虑一个问题，即，缩放后印章在页面上显示的问题。

1. 文档缩放后，印章的大小也要响应改变

document.getElementById(key2).style.width = defaultWidth * this.getRatio + 'px'

2.缩放前后，图片在文档上的相对位置计算

document.getElementById(key2).style.left = PDFLeft + x * r + dis + 'px'
document.getElementById(key2).style.top = PDFTop + y * r + 'px'

3.缩放前后文档比例系数

getRatio () {let ratio = 1;if (this.pageWidth !== this.originPageWidth) {ratio = this.pageWidth / this.originPageWidth}return ratio;
},

4.监听页面变化，对图片宽高、页面上显示位置做计算

watch: {pageWidth (newValue, originValue) {if (newValue !== originValue) {// 图片的默认宽度const defaultWidth = 200// 装pdf文件的容器const PDF = document.getElementById('pdfWrap')// pdf到网页左侧的距离const PDFLeft = PDF.offsetLeft// pdf到网页上方的距离const PDFTop = PDF.offsetTop// 记录坐标let x, y;// 记录放大缩小时页面的减少量let dis;let r = newValue / this.originPageWidthif (newValue < originValue) {dis = this.originPageWidth * 0.05} else {dis = -this.originPageWidth * 0.05 }x = pxy = py// 图片宽度document.getElementById(id).style.width = defaultWidth * this.getRatio + 'px'document.getElementById(id).style.left = PDFLeft + x * r + dis + 'px'document.getElementById(id).style.top = PDFTop + y * r + 'px'if (key === 'sign') {this.signPosition.sign[id] = [x, y, this.currentPage]} else if(key === 'date') {this.signPosition.date[id] = [x, y, this.currentPage]} else {this.signPosition.remark[id] = [x, y, this.currentPage]}}}
},

致谢

感谢 wss5 提供的offset、page、client、screen距离的讲解

前端小白，思路可能不是很严谨，不过确实是花费好几天时间做出来的，中间各种钻牛角尖，各种被已知条件混淆。如有错误还请路过的大神及时指出。

最后感谢各位花时间看完这篇文章。再会哦~

电子签章之文档缩放计算相对坐标相关推荐

国家发布电子病历共享文档规范
国家发布电子病历共享文档规范发布人:系统管理员发布日期:2016-09-21 点击:437 次近日,国家卫生计生委发布<电子病历共享文档规范><电子病历与医院信息平台标准符合性 ...
大型三甲医院云HIS系统源码强大的电子病历+完整文档
医院HIS系统源码云HIS系统:SaaS运维平台+多医院入驻+强大的电子病历+完整文档有源码,有演示一.系统概述 Ø 采用主流成熟技术,软件结构简洁.代码规范易阅读,SaaS应用,全浏览器访问前后 ...
[转]搜索引擎的文档相关性计算和检索模型（BM25/TF-IDF）
搜索引擎的检索模型-查询与文档的相关度计算 1. 检索模型概述搜索结果排序时搜索引擎最核心的部分,很大程度度上决定了搜索引擎的质量好坏及用户满意度.实际搜索结果排序的因子有很多,但最主要的两个因素是 ...
中医门诊电子病历xml文档数据读入数据库实验流程演示
前言: 本次实验老师要求我们用java程序实现,其整个实现流程也满足了老师提出的实验要求.由于绝大部分都是在课堂上完成的,写得有误的地方还请大家包涵. 1.下载所需的jar包并通过项目Build Pa ...
Word电子扫描仪 word文档转换为图片Pdf,Word文档扫描成Pdf,word文档加密 word转图片 word转pdf
Word文档转换为图片Pdf,Word文档扫描成Pdf Word转换为图片Pdf 1. Word转换为Pdf,程序很多,但转换后的Pdf,还可以复制,虽可以加密禁止复制,但市场上太多的P ...
获取元素在文档上的正确坐标
如何获取元素在页面上的正确坐标呢, 我想很多人都会想到 elem.getBoundingClientRect 和 window.scrollTop / window.scrollLeft 的求和,实 ...
word总积分怎么算计算机,Word文档怎么计算积分
回答: 1.求和:作一表格,填入一系列数字,光标定位于最后一格中,点击表格工具栏中的∑,即可求得总和: 2.求平均数:填入一系列数字,光标定位于最后一格中,点击菜单中的"表格"-& ...
python结巴分词词频统计_一个txt文档，已经用结巴分词分完词，怎么用python工具对这个分完词的文档进行计算统计词频，求脚本，非...
匿名用户 1级 2016-11-03 回答 #!/usr/bin/env python3 #-*- coding:utf-8 -*- import os,random #假设要读取文件名为aa,位于当 ...
电子签章系统标准与产品
电子签章系统标准与产品电子签章系统简介: 电子签章是将传统印章与电子签名技术结合,使电子签名操作和纸质文件盖章操作具有相同的可视效果.电子文档文档的电子签章具有和传统印章相同的功能和同等的法律效力. ...

电子签章之文档缩放计算相对坐标