项目页面
项目实现遇到的问题
在开发过程中遇到两个问题,
- 前台,后台的签字展示大小和签字图片和合同原件合并的字体生成大小
- 签字生成的图片大小,最小化,不能是canvas画布的大小
第一个问题
针对第一个问题,如果不解决这个问题,在签字页面展示的签字大小和服务端合并合同和签字后生成的图片中的签字大小会不一致,因为在pc端和在移动端都需要兼容,所以把签字生成的图片的高度和合同原件的宽度进行关联,所有的尺寸都是用了百分比。
合同原件实际展示的宽度 / 签字图片的高度 = 展示比例 (以移动端为主,签字图片的高度定义为26px,就可以得到展示的比例)
服务端通过移动端的比例计算出签字图片缩放的比例,进行合并
服务端生成缩略图需要给出签字图片实际的宽高,根据移动端给出的比例可以计算出
签字原图的宽度 / 签字原图的高度 = 缩略图的宽度 / 缩略图的高度
可以计算出缩略图的高度 = 合同原件的宽度/ 移动端给出的比例
这样服务端就可以生成和移动端签字展示一样的文件了
第二个问题
因为canvas 数字签名生成之后生成的图片尺寸和画布的大小是一样的。这样就会造成签字人的字签很多次以后才能签署到合适位置。如果签小了,字的周围留白就比较多,如果签满画布才能正好。
在这里,使用了Simplify.js 库。
Simplify.js 库可以对画布的线条进行跟踪计算,同时保持其形状,从而在处理线条时大大提高了性能,同时还减少了视觉噪声。在使用Canvas或SVG在浏览器中绘制点线图或地图路线时,这是必不可少的。
这样,两个问题解决完了
在这次的开发中也遇到一些其他的小问题,但是这两个问题是最核心的。