百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

JQ利用canvas，实现移动端手写板 「笔记」

qiyuwang 2024-10-30 05:32 22 浏览 0 评论

最近公司项目需求，客户可以直接在textarea可以输入签名，经过研究，采用Canvas解决，废话少说，直接上代码，样式可根据设计图自行修改。

仅此个人笔记，分享学习 。有不足之处，望大佬指点学习，共勉！！！


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.from_list{
		width: 96%;
		margin: 0 2%;
		color: #353535;
		line-height: 2rem;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}
	#reset_btn {
	    width: 4rem;
	    color: #ffffff;
	    font-size: 0.7rem;
	    text-align: center;
	    line-height: 1.5rem;
	    background: #2F7DCD;
	    border-radius: 0.15rem;
	    -webkit-border-radius: 0.15rem;
	}
	.sign_box {
		margin-top: 1rem;
	    padding: 0 0.75rem 0.5rem 1rem;
	    background: #ffffff;
	}
	.sign_content {
	    border: 1px solid #CCCCCC;
	}
	#canvas_box {
	    width: 100%;
	    height: 10rem;
	}
	canvas {
   		 height: 10rem !important;
	}
	.submit_box {
		width: 92%;
		margin: 0 4%;
	    height: 2.4rem;
	    line-height: 2.4rem;
	    background: #2F7DCD;
	   	border-radius: 0.2rem;
	    color: white;
	    text-align: center;
</style>
<body>
	<div class="from_list _bor_bottom0"><div>商户手动签字 <var>*</var></div><div id="reset_btn">重写</div></div>
    <div class="sign_box">
        <div class="sign_content">
            <div id="canvas_box"></div>
        </div>
    </div>
     <div class="submit_box" id="submit_btn">提交</div>
</body>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jSignature.min.js"></script>
<script type="text/javascript" src="./js/flashcanvas.js"></script>
<script type="text/javascript">
	 // *********电子签名功能*********
    let canvas_box = $("#canvas_box");    // 获取canvas标签
    canvas_box.jSignature(); // 初始化签名画板，初始化之后就可以进行操作
    let signImgSrc = "";   // 提交后台的图片路径
    // 监听手动签名滑动开始、移动、释放时，执行输入框失去焦点的功能，解决签名时触发软键盘的问题
    $("#canvas_box").on("touchstart mousemove touchend",function () {
        // console.log("走签名-mousemove事件");
        $("input,textarea").blur();
    });
     // 重置按钮，生成图片之后，可重置画板，并清空图片
    $("#reset_btn").on("click",function (e) {
        canvas_box.jSignature("reset");
        signImgSrc = "";
        e.preventDefault();
    });
    //提交签名
    $("#submit_btn").on("click",function (e) {
    	// 获取签名长度
    	let signLen = canvas_box.jSignature("getData","native").length; 
  		//签名判断，长度为0，提示客户签名
    	if(signLen==0){	
    		alert("请输入签名");
    	}else{
    		//当有商户签字时，赋值签字的base64码
    		 let datapair = canvas_box.jSignature("getData","image");    // 获取签名的“base64”数据
              console.log("datapair",datapair);
            // 拼接完整的base64转码,根绝接口说明，传递。
            signImgSrc = 'data:' + datapair[0] + "," + datapair[1];
             console.log('确认后的base64路径=',signImgSrc);
    	}
    })
</script>
</html>
yy

源码地址：https://github.com/Skingsking/signature

相关推荐

Java 环境安装详细指南（java环境安装步骤）

前言...

学习笔记-Linux JDK - 安装&amp;配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统...

Ubuntu16.04.1安装Java8（ubuntu安装java的命令）

上篇文章讲解了怎么在Windows下安装Java8《Windows10安装Java8》，这里讲解下怎么在Linux下安装Java。由于之前已经安装了Ubuntu16.04.1《...

Ubuntu 下安装 JDK17（ubuntu安装jdk1.7）

JavaSE17Ubuntu下JDK的安装本文主要针对Ubuntu的环境进行Java17的JDK安装。下载地址：...

Ubuntu安装JDK（ubuntu安装jdk报错）

在Ubuntu系统上安装JDK8u441版本，可以通过多种方式实现，包括使用官方JDK的PPA仓库、下载JDK的.tar.gz文件手动安装，或者使用第三方PPA仓库如WebUpd8。以下是通过JDK...

前端资源-实用的JS插件（前端浏览器插件）

现在前端资源越来越多，有创意十足的，有实用性高的，这些对于设计师和前端人员来说都是不错的灵感和资源，所以我们可多关注这些信息，对自己的专业技术有也会帮助的。今天设计达人网为大家分享有：页面进度条、图像...

图片延迟加载，你会使用吗?给你推荐几款插件，快来学习吧

图片延迟加载延迟加载就是当真正需要的时候，才执行加载操作。延迟加载作为Web前端性能优化的一种措施，已经越来越多的应用到各种程序中，而图片的延迟加载作为使用是最广泛的一种，更应该被我们掌握，今天我就给...

突发!Vite 插件惊现图片处理黑科技

【AlarmLevel】趣味【AlarmTitle】突发！Vite插件惊现图片处理黑科技【AlarmOverview】就在昨天，GitHub上一款名为vite-plugin-imagemi...

盘点前端程序员制作网站的常用工具

网站制作时，为了能够更快速、高效地完成任务，往往需要网站制作工具来进行辅助。尤其是前端程序员，五花八门的网站制作工具。今天就来盘点前端程序员一般开发网站程序时使用的那类网站制作工具。...

MyBatis 插件原理与实战（mybatis好用的插件idea）

文章导读MyBatis插件原理与实战什么是插件？...

VisBug:助力前端开发的浏览器插件

作为前端开发者相信肯定有遇到过以下场景：...

前端插件-unplugin-auto-import真的香香

没用这个插件前：你在Vue3中写了50个组件，每个文件开头都要重复这堆代码：import{ref,computed}from'vue'import{useRoute,...

VSCode中值得推荐的常用的16个高效前端插件「主题篇」(一)

VSCode是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。主题篇（16）VSCodeGreatIcons...

支持快速集成的前端网站反馈小插件

大家好，我是章鱼猫。...

很香的几款开源免费的流程设计器（开源流程图设计器）

1、LogicFlow(1)介绍：LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表