H5 前端实现签名,写入到合同照片里。(前端实现俩张图片合成)

一、概要:

   我实现的需求类似于,现实中的合同签名。这种方式是通过前端生成一个画布,然后用户通过微信进入,浏览到H5页面,写入自己的名字,在把写好的画布与我们预先准备好的合同图片合成一张图片,在上传至服务器。这种方式也可以后端进行合成,随后发现前端合成比较方便,就在前端做了。

二、前端代码






测试页面




阅读协议
请签署您的姓名: 您的浏览器不支持canvas技术,请升级浏览器!
清空 保存

实例图片

H5 前端实现签名,写入到合同照片里。(前端实现俩张图片合成)_第1张图片H5 前端实现签名,写入到合同照片里。(前端实现俩张图片合成)_第2张图片

三、注意

1.测试的时候用服务器测试,一个tomcat就可以了。不用服务器,图片无法出来,这是因为俩张图片存在浏览器的跨域问题。

2.提供一个测试demo的下载地址:https://download.csdn.net/download/weixin_42102798/12042398

你可能感兴趣的:(前端,前后端分离)