H5手寫簽名，適用於手機網頁、電腦網頁（IE9+）

阿新 • • 發佈：2019-02-01

先看看效果吧：

圖片儲存到伺服器為png格式，一般10k左右。

這個功能適用於H5app，或者H5，或者pc網頁端（IE9以上，支援canvas），

低端安卓機依然不支援，具體低端到什麼程度，沒有經過測試。

下邊上程式碼，前端HTML：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
		<!--<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" />-->
		<!-- this is for mobile (Android) Chrome -->
		<!--<meta name="viewport" content="initial-scale=1.0, width=device-height">-->
		<!--  mobile Safari, FireFox, Opera Mobile  -->
		<script src="js/libs/modernizr.js"></script>
		<!--[if lt IE 9]>
		<script type="text/javascript" src="libs/flashcanvas.js"></script>
		<![endif]-->
		<style type="text/css">
			/*div {
				margin-top: 1em;
				margin-bottom: 1em;
			}*/
			
			input {
				padding: .5em;
				margin: .5em;
			}
			
			select {
				padding: .5em;
				margin: .5em;
			}
			
			#signatureparent {
				color: #000;
				background-color: #fff;
				/*max-width:600px;*/
				padding: 10px;
				width: 100%;
			}
			/*This is the div within which the signature canvas is fitted*/
			
			#signature {
				border: 1px dotted #3eaed2;
				background-color: #ececec;
				height: 200px;
				width: 100%;
			}
			/* Drawing the 'gripper' for touch-enabled devices */
			
			html.touch #content {
				float: left;
				width: 92%;
			}
			
			/*html.touch #scrollgrabber {
				float: right;
				width: 4%;
				margin-right: 2%;
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
			}*/
			
			html.borderradius #scrollgrabber {
				border-radius: 1em;
			}
			.signature .jSignature{height: 100%;}
		</style>
	</head>
	<body style="background-color: #fff;">
			<div id="content" style="width: 100%;">
				<p>說明：
					伺服器端用的thinkphp，這裡只是個控制器，單獨使用無效的，
					如果不知道控制器該放在什麼位置，請自行百度。自行拼接請求伺服器的完整的網址。
				</p>
				<p style="padding-left: 10px;margin-top:10px;margin-bottom: 5px;">請在虛線框內簽名，完畢後點擊“儲存”。</p>
				<div id="signatureparent">
					<div id="signature"></div>
				</div>
				<div style="text-align: center;">
					<input type="button" name="btnReset" id="btnReset" value="重寫" />
					<input type="submit" class="" name="btnSave" id="btnSave"  value="儲存簽名" />
				</div>
			</div>
		<script src="libs/jquery1.10.2.min.js"></script>
		<script type="text/javascript">
			jQuery.noConflict();
		</script>
		<script>
			/*  @preserve
			jQuery pub/sub plugin by Peter Higgins ( 
[email protected])
			Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
			Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
			http://dojofoundation.org/license for more information.
			*/
			(function($) {
				var topics = {};
				$.publish = function(topic, args) {
					if(topics[topic]) {
						var currentTopic = topics[topic],
							args = args || {};

						for(var i = 0, j = currentTopic.length; i < j; i++) {
							currentTopic[i].call($, args);
						}
					}
				};
				$.subscribe = function(topic, callback) {
					if(!topics[topic]) {
						topics[topic] = [];
					}
					topics[topic].push(callback);
					return {
						"topic": topic,
						"callback": callback
					};
				};
				$.unsubscribe = function(handle) {
					var topic = handle.topic;
					if(topics[topic]) {
						var currentTopic = topics[topic];

						for(var i = 0, j = currentTopic.length; i < j; i++) {
							if(currentTopic[i] === handle.callback) {
								currentTopic.splice(i, 1);
							}
						}
					}
				};
			})(jQuery);
		</script>
		<script src="libs/jSignature.min.noconflict.js"></script>
		<script>
			(function($) {

				$(document).ready(function() {

					// This is the part where jSignature is initialized.
					var $sigdiv = $("#signature").jSignature({
							'UndoButton': false
						}),
						// All the code below is just code driving the demo. 
						$tools = $('#tools'),
						$extraarea = $('#displayarea'),
						pubsubprefix = 'jSignature.demo.'

					var export_plugins = $sigdiv.jSignature('listPlugins', 'export');
					
					$("#btnSave").on("click",function(){
						//可選格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
						var basedata = "data:"+$sigdiv.jSignature('getData', "image");
//						console.log("basedata:"+basedata);
//						$(".signResult").html(data);
						//server是我自定義的，值為http://www.abc.com/index.php?g=user&m=jk
						//這樣就能拼接完整的請求路徑了。
						var weburl=server+"&a=make_sign";
						var jsdata={imgbase:basedata};
						$.ajax({
							type:"post",
							url:weburl,
							async:true,
							data:jsdata,
							dataType:"json",
							success:function(data){
								console.log(JSON.stringify(data));
								if(data.success){
									console.log(data.msg);
								}
								else{
									console.log(data.msg);
								}
							}
						}); 
//						if(data.length<100){
	                        //本來這裡想判斷是否為空的，發現什麼都不寫時，竟然也有資料，應該是底板的編碼了
//							mui.toast("請重新簽名");
//						}
					});
					$("#btnReset").on("click",function(){
						$sigdiv.jSignature('reset');
					});
				})
			})(jQuery)
		</script>
	</body>

</html>

服務端使用thinkphp：

<?php
namespace User\Controller;
use Common\Controller\HomebaseController;
class JkController extends HomebaseController {
	function make_sign(){
		$host=$_SERVER['HTTP_HOST'];//系統域名
		$base64=I("imgbase");
		$result=$this->base64_upload($base64);
		if($result!==false){
			$signUrl=$host.$result;
			$rtn='{"success":true,"msg":"儲存成功","signurl":"http://'.$signUrl.'"}';
		}
		else{
			$rtn='{"success":false,"msg":"簽名儲存失敗"}';
		}
		echo $rtn;
	}
	//儲存base64為圖片
	function base64_upload($base64) {
	    $base64_image = str_replace(' ', '+', $base64);
	    //post的資料裡面，加號會被替換為空格，需要重新替換回來，如果不是post的資料，則註釋掉這一行
	    //上一行是註釋好像沒有意義，測試後發現，post來的資料，並沒有把+替換為空格
	    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
	        //匹配成功
	        if($result[2] == 'jpeg'){
	            $image_name = uniqid().'.jpg';
	            //純粹是看jpeg不爽才替換的
	        }else{
	            $image_name = uniqid().'.'.$result[2];
	        }
			$img_url="/Uploads/".date("Ymd")."/";
			//目錄要有可寫許可權，一般給user全部許可權就行了。
			if(!is_dir("./".$img_url)){
				mkdir("./".$img_url);
			}
	        $image_file = $img_url.$image_name;
	        //伺服器檔案儲存路徑
	        //  ./這才是指向根目錄的
	        if (file_put_contents(".".$image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
	            return $image_file;
	        }else{
	            return false;
	        }
	    }else{
	        return false;
	    }
	}
}

這是控制器，具體位置不用細說了吧。

注意：demo裡，有個地方需要修改，就是控制器的33和34行，路徑前面要加上./，這樣才能指向根目錄。

修改後如下：

if(!is_dir("./".$img_url)){
	mkdir("./".$img_url);
}

H5手寫簽名，適用於手機網頁、電腦網頁（IE9+）

先看看效果吧：圖片儲存到伺服器為png格式，一般10k左右。這個功能適用於H5app，或者H5，或者pc網頁端（IE9以上，支援canvas），低端安卓機依然不支援，具體低端到什麼程度，沒有經過測試。下邊上程式碼，前端HTML： <!DOCTYPE

css設定固定高度多行超出變省略號，適用於手機端

基本設定： display: -webkit-box;/** 物件作為伸縮盒子模型顯示 **/ word-break: break-all; text-overflow: ellipsis; -webkit-box-orient: vertical

css設定多行超出變省略號，適用於手機端。

width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 物件作為伸縮

圖靈機器人API，適用於微信、微博、QQ群、智能硬件等

語音 init statistic 天氣 curl 查看 syn weight net 該API有智能聊天、查天氣、查快遞、查菜譜、查車票、查航班、查出行、查周邊等近500個功能，能夠用在微信公眾平臺、QQ群、手機語音助手

最好的按鍵掃描和消抖方法，適用於復合、長按、按下或擡起響應按鍵

按鍵消抖按鍵掃描 C語言按鍵剛參加工作的時候，看了一些同事采用的按鍵掃描和消抖方法，對比學校裏和網上查到的按鍵處理，發現覺得不盡善盡美，有以下幾點： 1. 消抖復雜，效率低。有人直接在電平判斷後使用delay()函數，進行消抖，耽誤時間；有人在按鍵電平中斷中進行消抖和處理，導致其他的服務反應慢

vue使用localStorage儲存登入資訊，適用於移動端、pc端

眾所周知，vue可以用來開發移動端app，可以使用hbuilder將build好的vue打包成一個移動端app，但是用過之後就會發現，使用cookies或者session儲存登入的token，在手機端無

Opencv環境配置一遍就夠了！！（.props避免身體被掏空，適用於其他需要配置各種目錄的專案）

每次要用到opencv各種庫就要配置一堆的庫目錄包含目錄各種lib的輸入等一大堆東西，opencv300之後還好，之前一大堆的lib簡直要命，覺得身體被掏空！所以這裡介紹一種只需配置一次就能一勞永逸的方法~~~儲存配置的.props檔案！同樣也適用於其他需要配置環境的

Linux的企業-Mysql讀寫分離，組的復制Group-based Replication（2）

mysql讀寫分離組的復制基於組的復制（Group-based Replication）是一種被使用在容錯系統中的技術。Replication-group（復制組）是由能夠相互通信的多個服務器（節點）組成的。在通信層，Group replication實現了一系列的機制：比如原子消息（atomic

帶你手寫基於 Spring 的可插拔式 RPC 框架（一）介紹

目錄：帶你手寫基於 Spring 的可插拔式 RPC 框架（一）介紹帶你手寫基於 Spring 的可插拔式 RPC 框架（二）整體結構帶你手寫基於 Spring 的可插拔式 RPC 框架（三）通訊協議模組帶你手寫基於 Spring 的可插拔式 RPC 框架（四）代理類的注入與服務啟動帶你手寫基於 S

從零開始搭建Electron+Vue+Webpack專案框架，一套程式碼，同時構建客戶端、web端（一）

摘要：隨著前端技術的飛速發展，越來越多的技術領域開始被前端工程師踏足。從NodeJs問世至今，各種前端工具腳手架、服務端框架層出不窮，“全棧工程師”對於前端開發者來說，再也不只是說說而已。在NodeJs及其衍生技術高速發展的同時，Nw和Electron的問世，更是為前端發展提速不少，依稀記得哪位前輩說過，“能

【原創】從零開始搭建Electron+Vue+Webpack專案框架，一套程式碼，同時構建客戶端、web端（二）

導航：（一）Electron跑起來（二）從零搭建Vue全家桶+webpack專案框架（三）Electron+Vue+Webpack，聯合除錯整個專案（未完待續）（四）Electron配置潤色（未完待續）（五）預載入及自動更新（未完待續）（六）構建、釋出整個專案（包括client和web）（未完待續）摘要：

Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！

最近說專案可能會用到一個電子簽名，不需要識別的那種，只是一個單純手寫簽名，然後以base64的格式提供給前端web頁面。其實挺簡單的，自定義一個手寫view就上線了。Android 電子簽名，手寫簽名案列實現方法！先上圖：按鈕說明：第一個按鈕是清除手寫板，第二個是將手寫板的

Android簡單的編寫一個txt閱讀器（沒有處理字符編碼），適用於新手學習

選項 tro 源碼 tin open 打開文件 package idt pac 　　本程序只是使用了一些基本的知識點編寫了一個比較簡單粗陋的txt文本閱讀器，效率不高，只適合新手練習。所以大神勿噴。　　其實想到編寫這種程序源自本人之前喜歡看小說，而很多小說更新太慢，所以本

Java封裝JDBC數據庫增、刪、改、查操作成JAR文件，以供Web工程調用，適用於多種數據庫

通過 ive trac end 使用方法數據 div bstr 工程廢話不多說，直接上源代碼，最後有使用方法，當然，也可以作為普通公用類使用，只是封裝成JAR更方便使用。 [java] view plain copy package db.util;

深入MNIST，手寫數字，加cnn

Tensorflow python from __future__ import print_function import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # number 1 t

安卓圖片壓縮處理的終極方法，適用於各種機型

//直接呼叫getimage,引數為：路徑、寬、高 public static Bitmap getimage(String pathName, int reqWidth, int reqHeight) { final BitmapFactory.Options option

限制非數字輸入，適用於所有數量的輸入

//限制商品數量字元輸入 $('.goods-num').on('keypress',function (ev) { // console.log(String.fromCharCode(ev.keyCode)) var reg = /

科大訊飛線上語音識別音訊來源為【檔案】的java接入實現，適用於初學者

****科大訊飛的語音識別提供了兩種音訊來源方式，一個是通過麥克風，一個是來自音訊檔案。這裡介紹本人自己寫的通過音訊檔案識別的java程式碼。**** 【離線識別參考我的另一篇】用java呼叫科大訊飛的離線語音識別dll實現離線識別（JNA實現）之前的註冊、獲得註冊碼、

深度神經網路，適用於小型指令碼文字相關的語音驗證

DEEP NEURAL NETWORKS FOR SMALL FOOTPRINT TEXT-DEPENDENT SPEAKER VERIFICATION d-ivector系統優於i-ivector系統。我們還嘗試了DNN培訓的不同配置。如果沒有maxo

H5手寫簽名，適用於手機網頁、電腦網頁（IE9+）

相關推薦