H5 前端实现签名，写入到合同照片里。（前端实现俩张图片合成）

最新推荐文章于 2024-06-24 17:28:43 发布

路飞的影子

最新推荐文章于 2024-06-24 17:28:43 发布

阅读量4.6k

点赞数 3

分类专栏：前端前后端分离文章标签：前端

本文链接：https://blog.csdn.net/weixin_42102798/article/details/103615523

版权

一、概要：

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

二、前端代码

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<html>
<head>
<title>测试页面</title>
</head>
<style>
.div-top {text-align: center;height: 4rem;line-height: 4rem;overflow: hidden;width: 100%;background: url(img/background.gif) repeat-x 0;}
.div-topSpan {font-size: 1.5rem;color: #FFFFFF;}
.canvas {display: block;border: 1px solid #95b4e3;}
#clear,
#clear1,
#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-

最低0.47元/天解锁文章

路飞的影子

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
H5 前端实现签名，写入到合同照片里。（前端实现俩张图片合成）

一、概要：我实现的需求类似于，现实中的合同签名。这种方式是通过前端生成一个画布，然后用户通过微信进入，浏览到H5页面，写入自己的名字，在把写好的画布与我们预先准备好的合同图片合成一张图片，在上传至服务器。这种方式也可以后端进行合成，随后发现前端合成比较方便，就在前端做了。二、前端代码<!DOCTYPE html><meta charset="UTF-8"&g...
复制链接

扫一扫

专栏目录