jSignature开发实例

插件描述:jQuery手写签名插件jSignature ,实现H5APP、网页 手写签名涂鸦 保存图片

代码实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  <head>   <title>My JSP 'index.jsp' starting page</title>  <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script>  <script type="text/javascript" src="jSignature.min.js"></script>  <style type="text/css">  #signature{  border: 1px solid red;  }  </style>  <script type="text/javascript">  //初始化画布  $(document).ready(function(){  $("#signature").jSignature({height:300,color:"#000",lineWidth:4});  })  //重置画布  function clearSig(){  $("#signature").jSignature("clear");  }  //将画布内容显示到IMG  function importImg(){  var sig=$("#signature");  $("#img").attr("src","data:"+sig.jSignature('getData'));  }  </script>  </head>  <body>  <button onclick="clearSig()">重置</button>  <button onclick="importImg()">获取</button>  <div id="signature"></div>  <img id="img">  </body>  
</html>

注意:加上jquery-1.11.1.min.js、jSignature.min.js

疑问1,怎么去除签字版下面的黑线
这里写图片描述
在jSignature.min.js中修改decor-color属性,改为你想要的颜色。

疑问2,怎么判断是否签名

if( $("#signature").jSignature('getData', 'native').length == 0){alert("请先进行签名");return;
}

疑问3,怎么把图片进行存取
一般有两种方法存到数据库:一种是将图片保存的路径存储到数据库;另一种是将图片以二进制数据流的形式直接写入数据库字段中。

Base64
主要不是加密,它主要的用途是把这里写链接内容一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。

1、转化为base64流进行存放。
这里写图片描述

截取data:image/png;base64,后面流传入后台存放到BLOB类型中。
byte[] b = Base64.decode(stream.toString());

2、前台展示

Base64.encode((byte[]) stream)
<img src='data:image/png;base64,"+stream+"'/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

json、xml

json&#xff1a;(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简单地说&#xff0c;JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串&#xff0c;然后就可以在函数之间轻松地传递这个字符串&#xff0c;或者在异步应用程序中将字符串从 …

python中前后端通信方法Ajax和ORM映射(form表单提交)

后端从数据库获取数据给到前端&#xff1a; 第一种方式&#xff1a; admin.py文件代码&#xff1a; admin.route(/showList) def show():# 获取数据库所有文章数据&#xff0c;得到一个个对象resArticle.query.all()dicts[]# 将每一个对象转成字典并加入一个列表&#xff0c;再…

C#知识点总结系列:3、C#中Delegate和Event

一、Delegate委托可以理解为一个方法签名。 可以将方法作为另外一个方法的参数带入其中进行运算。在C#中我们有三种方式去创建委托&#xff0c;分别如下&#xff1a; public delegate void Print(string str);static void delegatemethod(string str){Console.WriteLine(str);}…

python的2种字符串格式化输出

字符串格式化代码&#xff08;typecode&#xff09; 法一&#xff1a; %格式使用下面的格式 %[(name)] [flags] [width][.precision] typecode (name)输出字典的value使用&#xff0c;这里的name是字典的key&#xff08;实际指定时&#xff0c;必须有外面的圆括号&#xff09; …

Python中字典合并的四种方法

字典是Python语言中唯一的映射类型。映射类型对象里哈希值&#xff08;键&#xff0c;key&#xff09;和指向的对象&#xff08;值&#xff0c;value&#xff09;是一对多的的关系&#xff0c;通常被认为是可变的哈希表。字典对象是可变的&#xff0c;它是一个容器类型&#xf…

从零开始的全栈工程师——js篇2.12(面向对象)

面向对象 Js一开始就是写网页特效&#xff0c;面向过程的&#xff0c;作者发现这样写不好&#xff0c;代码重复利用率太高&#xff0c;计算机内存消耗太大&#xff0c;网页性能很差。 所以作者就收到java和c的影响&#xff0c;往面向对象靠齐。Js天生有一个Object&#xff0c;但…

20172332 2017-2018-2 《程序设计与数据结构》第七周学习总结

20172332 2017-2018-2 《程序设计与数据结构》第七周学习总结 教材学习内容总结 第十一章 二叉查找树 1.二叉查找树&#xff1a;一种带有附加属性的二叉树。即每个结点其左孩子都要小于其父结点&#xff0c;而父结点又小于或等于其右孩子。&#xff08;左孩子<父结点<右孩…

weblogic的输出打印日志设置

设置路径&#xff1a; 1、服务器——》控制&#xff0c;进入服务器设置 2、服务器启动——>设置参数 3、参数配置&#xff1a; -Xms2048m -Xmx4096m -XX:PermSize256m -XX:MaxPermSize512m -XX:UseConcMarkSweepGC -XX:CMSClassUnloadingEnabled -XX:DisableExplicitGC -…

支持向量机——Large Margin Classifier

支持向量机的目标是 \[\underbrace {\min }_\theta \left\{ {C\left[ {\sum\limits_{i 1}^m {{y^{\left( i \right)}}{\mathop{\rm Cos}\nolimits} {t_1}\left( {{\theta ^T}{x^{\left( i \right)}}} \right) \left( {1 - {y^{\left( i \right)}}} \right){\mathop{\rm Cos}\…

2018-2019-1 20189210 《LInux内核原理与分析》第四周作业

第三章 这一章接触内核源代码&#xff0c;对内核源码进行编译和调试跟踪 一、预备知识&#xff1a; 内核&#xff1a;整个操作系统的最底层&#xff0c;它负责了整个硬件的驱动以及提供各种系统所需的内核功能。内核实质上是系统上面的一个文件而已&#xff0c;这个文件包含了驱…

linux测试网络是否连通ping、telnet命令

ping 可以测试到目标机器的连通性&#xff0c;ping域名还可以得出解析IP。 ping ip地址 例&#xff1a;ping 127.0.0.1图例&#xff1a; telent测试端口是否开放。 telent ip地址 端口号 例如&#xff1a;telent 127.0.0.1 8080

深入了解Kubernetes REST API的工作方式

关于Kubernetes REST API的工作方式&#xff1a; 在哪里以及如何定义从REST路径到处理REST调用的函数的映射&#xff1f; 与etcd的交互发生在哪里&#xff1f; 从客户端发出请求到保存在etcd中对象的端到端路径是怎样的&#xff1f; Kubernetes REST框架 Kubernetes REST实现可…

gitlab hook触发jenkins自动构建

意义&#xff0c;gitlab推送或合并代码后触发jenkin自动构建发布代码或者执行命令推送规则 1.安装gitlab和hook插件有时需要重启jenkins服务&#xff0c;可能兼容性问题&#xff0c;安装完之后构建中看不到hook插件 2.配置jenkins构建中的hook插件下图中圈出为必选&#xff0c;…

React 点击按钮显示div与隐藏div

<!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>React 点击按钮显示div与隐藏div</title><script src"https://unpkg.com/react16/umd/react.development.js"></script><script src"…

mac/linux 解决启动命令行出现declare问题

问题描述&#xff1a;启动命令行时出现以下现象&#xff0c;如图所示&#xff1a; 问题解决&#xff1a; 在配置环境变量时&#xff0c;在某一行直接单独写了一个export,要么在bashrc中&#xff0c;要么在bash_profile等配置文件中&#xff0c;系统加载环境变量时就出现了上述情…

MVC 模式和模型 2

MVC框架 一个实现 MVC 模式的应用包含模型、视图、控制器 3 个模块&#xff1a; 模型&#xff1a;封装了应用的数据和业务逻辑&#xff0c;负责管理系统业务数据 视图&#xff1a;负责应用的展示 控制器&#xff1a;负责与用户进行交互&#xff0c;接收用户输入、改变模型、调整…

Java中线程池,你真的会用吗?

在《深入源码分析Java线程池的实现原理》这篇文章中&#xff0c;我们介绍过了Java中线程池的常见用法以及基本原理。 在文中有这样一段描述&#xff1a; 可以通过Executors静态工厂构建线程池&#xff0c;但一般不建议这样使用。 关于这个问题&#xff0c;在那篇文章中并没有深…

深入了解java虚拟机(JVM) 第四章 对象的创建

一、对象的创建过程 对象的创建过程大致可以分为六步&#xff0c;其中对象的分配尤为重要&#xff1a; 二、对象分配内存 一般来说对象分配内存有两种方式&#xff1a; 第一种是指针碰撞&#xff0c;这是一种比较理想的方式&#xff1a;如果Java堆是绝对规整的&#xff1a;一边…

[UWP]使用Picker实现一个简单的ColorPicker弹窗

[UWP]使用Picker实现一个简单的ColorPicker弹窗 原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗在上一篇博文《[UWP]使用Popup构建UWP Picker》中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程。但是没有应用实例的话可能体现不出Picker相对于…

C# WebRequest.Create 锚点“#”字符问题

背景 在与后台API接口对接时&#xff0c;如将网页Url作为参数请求数据时&#xff0c;如果是锚点参数&#xff0c;则会丢失。 锚点参数 请求通过WebRequest.Create创建一个WebRequest&#xff1a; 1 var uri "https://id.test.xxx.com/api/v1/auth/sso/url?redirectUrlht…