H5手写签名，适用于手机网页、电脑网页（IE9+）

先看看效果吧：

图片保存到服务器为png格式，一般10k左右。

这个功能适用于H5app，或者H5，或者pc网页端（IE9以上，支持canvas），

低端安卓机依然不支持，具体低端到什么程度，没有经过测试。

下边上代码，前端HTML：

	
		
		
		
		
		
		
		
		
		
		
	
	
			

				
说明：
					服务器端用的thinkphp，这里只是个控制器，单独使用无效的，
					如果不知道控制器该放在什么位置，请自行百度。自行拼接请求服务器的完整的网址。
				
				
请在虚线框内签名，完毕后点击“保存”。
				

					

				
				

					
					
				
			
		
		
		
		
		
	

服务端使用thinkphp：

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);
}

完整的demo下载路径：https://download.csdn.net/download/moniteryao/10639108

 

 

js插件来源：http://www.jq22.com/jquery-info13488

服务器接收base64另存为图片借鉴：https://www.cnblogs.com/hopelooking/p/6277419.html