jSignature開發例項

阿新 • • 發佈：2018-12-04

外掛描述：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+"'/>

jSignature開發例項

外掛描述：jQuery手寫簽名外掛jSignature ，實現H5APP、網頁手寫簽名塗鴉儲存圖片程式碼例項 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <

Thinkphp5整合微信掃碼支付開發例項

ThinkPHP框架是比較多人用的，曾經做過的一個Thinkphp5整合微信掃碼支付開發例項，分享出來大家一起學習開啟首頁生成訂單，並顯示支付二維碼 public function index() {

vba開發例項教程

上面為vba要處理的excel頁面展示； 2、如下是處理的指令碼 '主方法 Sub main_function() Dim MyUrl As String MyUrl = Range("B7").Value MyUrl = "http://" & MyUrl &a

Cocos2d-x 3 X手遊開發例項詳解

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

微信公眾平臺開發例項文件 wx_sample.php 詳細解釋

<?php /** * wechat php test */ //define your token define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest();//將11行的class類例項化 $wechatO

Android studio 下 JNI 開發例項

在AS中進行 NDK 開發之前，我們先來簡單的介紹幾個大家都容易搞懵的概念：到底什麼是JNI，什麼是NDK？何為“交叉編譯”？先看什麼是 JNI？JNI 的全稱就是 Java Native Interface，即java本地開發介面。可能大家和我一樣，一聽到介面什麼的就犯懵：“

javabean+jsp+servlet+jdbc從軟體安裝到開發例項

javabean\jsp\servlet\jdbc的作用： JavaBean：用於傳遞資料，擁有與資料相關的邏輯處理。JSP：從Model接收資料並生成HTML。Servlet：接收HTTP請求並控制Model和View。jdbc：用於配置環境首先新建course的資料庫：包含name,teacher,

PHP微信支付開發例項

1.開發環境 Thinkphp 3.2.3 微信：服務號，已認證開發域名：http://test.paywechat.com (自定義的域名，外網不可訪問) 2.需要相關檔案和許可權微信支付需申請開通微信公眾平臺開發者文件：htt

Hive UDF開發例項

Hive UDF簡介： Hive UDF（Hive User-Defined Function）開發是在資料分析的時候如果內建的函式解析不了的情況下去做的開發，擴充套件HiveSQL功能的自定義函式。有兩種API：簡單API： org.apache.hadoop.hive

ABAP Docking Control Container開發例項

ABAP Docking Control Container開發例項使用時需引用cl_gui_docking_container事物 DATA: splitter &nb

springboot 簡單開發例項

springboot 開發其實是一個全新的開發模式，它可以通過註解的方式進行我們專案的開發，不需要我們進行比如web.xml及相關框架applicationcontext.xml等檔案的配置，而是自動的進行配置啟動為一體的簡潔開發模式。話不多說首先一個小例子。1.spring

Vue拖拽元件開發例項

為什麼選擇Vue?主要原因：對於前端開發來說，相容性是我們必須要考慮的問題之一。我們的專案不需要相容低版本瀏覽器。專案本身也是一個數據驅動型的。加之，Vue本身具有以下主要特性：使用虛擬DOM；輕量級框架；高效的資料繫結；靈活的元件系統；完整的開發生態鏈。這就是我們為什麼選擇

敏捷開發-例項1

本系列的第一篇【使用者故事驅動的敏捷開發 – 1. 規劃篇】跟大家分享瞭如何使用使用者故事來幫助團隊建立需求的過程，在這一篇中，我們來看看如何使用這些使用者故事和功能點形成產品backlog。產品backlog是敏捷開發中用來管理需求列表，排定優先順序，形成迭代計劃，組織開發/測試和交付過程的工具。可以說

muleESB的第一個開發例項-HelloWorld（二）

上篇博文我們簡單的介紹了什麼是ESB，教給了大家如何下載和安裝了Studio。假設在學習本教程之前，假設您已經下載、安裝並啟動了Anypoint Studio。建立新專案單擊File，選擇New>Mule Project 開啟新的

logback日誌輸出不同級別到不同檔案（開發例項配置）

<?xml version="1.0" encoding="UTF-8"?> <configuration>  <appender name="STDOUT" class="

PHP支付寶微信個人免籤即時到帳介面開發例項

PHP支付寶微信個人免籤即時到帳介面開發例項，使用原生支付寶即時到帳介面修改而來，即可實現多介面收款功能，開發只需要按照支付寶即時到帳介面開發即可，減少開發難度需要修改的檔案：notify_url.php return_url.php 同步和非同步資料的處理 alipay.

Arduino 「氣象站」硬體開發例項

硬體開發入門使用 Arduino，會讓初學者更容易上手。Arduino 是一種開源硬體，程式語言使用 C 語言，只需要有一點點 C 語言的基礎就可以上手 Arduino。本 Chat 通過一個例項開發專案，讓讀者對硬體開發有個認識，通過產品的原型設計，功能實現，修改迭代，做出

微信小程式傳送模板資訊php開發例項

使用PHP開發語言開發微信小程式模板資訊傳送微信小程式傳送模板資訊首先要在小程式後臺新增或者申請個人模板庫，來獲得相應的模板ID，詳情操作可看官方文件第一步獲得access_t

RDIFramework.NET -.NET快速資訊化系統開發整合框架【開發例項 EasyUI】之產品管理（WebForm版）

RDIFramework.NET—.NET快速開發整合框架【開發例項】之產品管理（WebForm版）第1部分概述　　RDIFramework.NET，基於.NET的快速資訊化系統開發、整合框架，為企業或個人在.NET環境下快速開發系統提供了強大的支援，開發人員不需要開發系統的基礎功能和公

RDIFramework.NET-.NET快速資訊化系統開發整合框架【開發例項 EasyUI】之產品管理（MVC版）

RDIFramework.NET—.NET快速開發整合框架【開發例項】之產品管理（MVC版）第1部分概述　　RDIFramework.NET，基於.NET的快速資訊化系統開發、整合框架，為企業或個人在.NET環境下快速開發系統提供了強大的支援，開發人員不需要開發系統的基礎功能和公共模組，框架

jSignature開發例項

相關推薦