jsignature 中国語開発チュートリアル-jsチュートリアル-php.cn

jSignature は、ブラウザウィンドウでの署名を簡素化し、ユーザーがマウス、ペン、または指で署名を書き込めるようにするシンプルなプラグインです。次の記事では、jsignature 中国語開発チュートリアルと、jsignature プラグインの使用法を簡単に説明します。

jSignature は、ストロークのベクトルアウトラインを通じて署名をキャプチャします。 jSignature は PNG 画像を出力でき、柔軟性に優れています。

github：https://github.com/brinley/jSignature
http://www.unbolt.net/jSignature/ パート英語ドキュメントの

この記事では、最終的にデジタル署名された完全なデモとバックグラウンド処理の PHP バージョンを提供します。下部にある QQ グループアカウントを参照して、ダウンロードに入ってください。より多くの人に知ってもらいたいです。

#これまでに使用した jquery の最適なバージョンは比較的新しいことに注意してください。私のバージョンは jquery2.1.4 で、jSignature のバージョンは jSignature v2 です。バージョンが新しいほど優れているためです。 h5 フローへの書き込みの影響。

このドキュメントは古いバージョンの翻訳と、個人的な経験に基づくいくつかの修正に基づいていることに注意してください。

最後に、いくつかのヒントと個人的な経験があります。

注:
このプラグインの最新バージョンは IE8 をサポートしています。一部の JS ファイル要求プロトコルは Windows ローカルファイルをサポートしていないため、ローカルサーバーでテストし、直接開かないでください。プロトコル
file:// リクエストと http リクエストの違い
プロトコルのリクエスト方法の違いが分からない場合でも、心配しないでください。ローカルサーバーに直接アクセスして、 test

基本的に使用される方法

<div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

ログイン後にコピー

が html5 でのみ引用されている場合、ブラウザはこの互換性の問題を解決するために

<div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

   <!--[if lt IE 9]>
        <script type="text/javascript" src="flashcanvas.js"></script>
        <![endif]-->

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

ログイン後にコピー

を使用する必要があります。

#メソッド:

#メソッド名使用方法Descriptionclear.jSignature("clear")キャンバスをクリアしてリセットしますgetData.jSignature("getData", "base30 ")キャンバスを、フォームの投稿時に任意のデータベースに文字列として保存できる Base64 でエンコードされたデータ文字列に変換します。 submitimportData.jSignature("importData",dataurl)上記の getData メソッドから抽出されたデータ URL で既存の jSignature キャンバスを更新します。 ##オプションパラメータ:

##パラメータ名

説明デフォルト値widthキャンバスの幅を定義します。 % または px の値はありません (新しいバージョンでは、パーセントと px の接尾辞を使用できます) 250height キャンバスの高さを定義します。。 % または px の値はありません (新しいバージョンでは、パーセントと px の接尾辞を使用できます) 150color ストロークの色を定義します。キャンバス上で。任意の色の 16 進値を受け入れます #000background-color キャンバスの背景色を定義します。任意の色の 16 進値を受け入れます #ffflineWidth 線の太さを定義します。任意の正の値 (デフォルトのキャンバスの水平線ブラシの幅も) を受け入れます。 1cssclass キャンバスを定義するカスタム CSS クラス# ＃＃＃＃＃なし＃＃＃＃＃＃＃＃＃＃＃＃

导入图像数据

画布图像导入并保存到数据库后，可以通过其base64编码的字符串轻松显示图像，

要通过jQuery来做，可以使用类似的东西

$("<img class=&#39;imported&#39;></img>").attr("src",sig.jSignature(&#39;getData&#39;, &#39;base30&#39;)).appendTo(sig);

ログイン後にコピー

或者直接从服务器端输入数据串到img的的src属性中

<img src="<? echo $datastring ?>" />

ログイン後にコピー

您还可以将dataUrl导入到jSignature画布中，以便您可以通过以下JavaScript代码编辑签名

$("#signature").jSignature("importData",dataurl);

ログイン後にコピー

dataurl是上面使用的相同的数据串。您可以在下面的演示中通过从其中一个jSignature复制数据字符串，然后单击另一个jSignaure的“导入数据到画布”，

并将数据字符串粘贴到出现的对话框中，从而在下面的演示中看到它

giehub官方版本部分

jSignature是一个jQuery插件，它简化了浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，笔或手指绘制签名。

j签名将签名作为笔画的向量轮廓捕获。虽然jSignature也可以导出伟大的位图（PNG），提取签名的高度可扩展的行程移动坐标（也称为矢量图像）允许更大的灵活性

进行额外的努力（通过平滑和压力模拟），使得笔画在屏幕上看起来很漂亮，而这些画面由阁下绘制。

所有主要的桌面，平板电脑和手机浏览器的支持。默认情况下使用HTML5画布元素。我们依靠基于canvas元素模拟器Flash（flashcanvas）当实际帆布不支持的浏览器（Internet Explorer 8节下）。

实时jsignature呈现只有装置适当的“漂亮的”逼近我们捕获。捕获的数据总是相同的-我们尽可能捕捉尽可能多的运动坐标。笔触的绘制不同于浏览器的功能，设备的效率，屏幕大小。

捕获的签名的屏幕表示的这种降级和增强是为了确保渲染不会影响捕获的响应性而进行的。例如，在缓慢渲染设备（Android浏览器，基于FlashCanvas的Canvas仿真）上，平滑被踢出了一个缺口，以补偿捕获的笔画坐标中的巨大差距 - 捕获设备效率低下的结果。在所有情况下，客户都会对图纸的反应和美观感到高兴。

jSignature可以轻松地将其自己调入现有样式的网站。 jSignature自动检测包装元素上使用的颜色（文字颜色=笔颜色，背景=背景），并自动选择“装饰”（签名行）的令人愉快的中间色调。 jSignature适用于固定和可变宽度的网页设计，以及各种大小的屏幕（手机，平板电脑，电脑屏幕），并且当父元素更改大小时自动重新绘制绘图区域和签名。

demos here：
http://brinley.github.io/jSignature/

将jSignature添加到您的页面

查看源代码树中的libs文件夹。从那里挑选3个文件：

1、jSignature.min*.js (“*”表示您有选择。您可以选择常规的以jQuery为中心的构建或特殊的jQuery.NoConflict构建)

2、flashcanvas.js

3、flashcanvas.swf

jSignature取决于（至少最新版）jQuery

如果您不打算支持IE 7和8，则不需要下载FlashCanvas文件。

请注意，FlashCanvas是两个文件的连贯一组，分别是flashcanvas.swf和flashcanvas.js，这两个文件必须位于同一个文件夹中。不要将它们从单独的文件夹托管，因为flashcanvas.js在与其提供的同一文件夹中查找flashcanvas.swf。不要将flashcanvas.js重命名为其他任何东西，因为它在DOM中通过该名称查找自己，以找出从哪里加载flashcanvas.swf。

jSignature本身有三个不同的代码段转换成一个最小的可部署：:

准备Canvas元素的代码。它包括检测浏览器功能，最大限度地利用div的范围内的画布，在需要时使用Flashcanvas设置仿真画布。
处理实际签名捕获+数据导入/导出API的代码。它附加并监听移动事件处理程序，将数据结构中的笔触数据存储起来，处理API调用。
插件可帮助您获取方便您的格式的签名数据，如原始数据坐标，图像，压缩的url兼容字符串，SVG。

如果您确定受众受限于特定的浏览器引擎（您可以通过嵌入式浏览器小部件部署，使用类似PhoneGap的部件），您可以卷起袖子并将其放在第1部分。如果你知道你只需要一个导出/导入插件，那么从最小化的可部署中删除你不需要的插件。

更多自定义数据导出/导入插件可以单独加载，而无需重新设置主要部署。但是，缩小是有趣和容易的。只需看看wscript.py文件，并更改几行以包含/排除某些部分。

对于“通用”部署场景（包括旧IE的支持），将其添加到您的页面：

<!-- this, preferably, goes inside head element: -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->

<div id="signature"></div>

<!-- you load jquery somewhere before jSignature ... -->
<script src="path/to/jSignature.min.js"></script>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

ログイン後にコピー

解释：

[if lt IE 9]部分加载IE小于9的Flashcanvas库（仅在IE上支持Flashcanvas，所以没有任何意义进行功能检测。）
我们标记一个div，其中将创建canvas元素。任何ID或其他jQuery选择器都可以。
我们加载jSignature插件。
最后，脚本调用指定DIV中的签名小部件。

API

以下方法暴露在jQuery对象之上：.jSignature（String command，* args）

参数因命令而异。当提供命令时，命令将是一个带有jSignature命令的字符串。目前支持的命令：

init是默认的，假定的动作。 init需要一个参数 - 一个设置对象。您可以省略命令，并在init中传递设置对象。返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
reset 复位只是清除签名板，数据存储（并放回签名线和其他装饰）。返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
clear reset别名，历史遗留
getData 接受参数 - 数据格式的名称。返回适合数据格式的数据对象
setData 需要两个参数 - 数据对象，数据格式名称。当数据对象是以data-url模式格式化的字符串时，您不需要指定数据dormat名称。数据格式名称（mime）将从data-url前缀中隐含。见下面的例子。返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
importData setData的别名，历史遗留
listPlugins 接受一个参数 - 表示要列出的插件的类别（仅导出，此时支持的导入）的字符串。返回字符串数组。
disable 使画布只读，并禁用jSignature按钮
enable 使画布只读，并启用jSignature按钮
isModified 如果jSignature被修改，返回一个布尔值true，否则返回false。
getSettings 返回jSignature实例的可配置设置。
updateSetting 需要三个参数 - 设置名称，新值，布尔值，如果更改应该影响当前签名或将来的笔画。这允许您更新某些设置，如lineWidth或线条颜色，使用第三个参数可以使更改适用于现有笔画。目前，更新现有笔画的更改仅适用于像颜色这样的几个设置。返回更新的值

使用实例：

var $sigdiv = $("#signature")
$sigdiv.jSignature() //初始化 jSignature 插件
// after some doodling...
$sigdiv.jSignature("reset") // 清除画布并在其上重新装饰。
// 将签名作为SVG并在浏览器中呈现SVG。
// （!!!来自IMG元素的内联SVG渲染在所有浏览器中都不起作用!!!）
//这个导出插件返回一个数组[mimetype，base64编码的SVG的字符串的签名笔画]
var datapair = $sigdiv.jSignature("getData", "svgbase64") 
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1] 
$(i).appendTo($("#someelement")) // append the image (SVG) to DOM.

// 获取签名为“base30”数据对
// 数组[mimetype，jSignature的自定义Base30压缩格式的字符串]
datapair = $sigdiv.jSignature("getData","base30") 
// 将数据重新导入jSignature。
// 导入插件了解数据网址格式的字符串，如“data：mime; encoding，data”
$sigdiv.jSignature("setData", "data:" + datapair.join(","))

ログイン後にコピー

数据导入/导出（和插件）

以下插件（数据格式）是主线j签名的一部分，可分发：

default （仅限EXPORT ONLY）（BITMAP）数据格式与输出格式j兼容，在早期版本中生成的getData被调用时不带参数。默认情况下，默认情况下（默认情况下）调用$ obj.jSignature（“getData”）数据格式是Canvas - data-url格式化的base64编码（可能的PNG）位图数据，如下所示：data：image / png; base64，i1234lkj123; k4; l1j34l1kj3j ...此导出调用返回单个数据网址格式的字符串。
native （导出和导入）（VECTOR）（VECTOR）数据格式是绘制笔画的自定义表示形式，作为具有道具.x，.y的对象数组，每个对象都是一个数组。这个JavaScript对象结构是每个绘图笔画存储在jSignature中的实际数据结构。该结构专门用于收集笔触数据点的速度和效率。（尽管它有一些反直觉，章鱼式的结构，它（a）允许快速堆积双轴坐标，而不需要为每个数据点创建Point对象，（b）提供非常简单的循环，基于数据的处理）。虽然您可以JSONify，它传递，解析，从此渲染，它可能不是最有效的方式来存储数据，因为内部格式可能会改变其他主要版本的jSignature。我建议将base30格式视为直接的，但紧凑的等同于“native”-as-JSON。这个数据适用于运行统计信息（尺寸，画布上的签名位置）和编辑笔画（例如允许“撤消最后一个笔画”）。
base30 (alias image/jSignature;base30) (エクスポートおよびインポート) (VECTOR) (VECTOR) (VECTOR) (VECTOR) (VECTOR) (VECTOR) データ形式驚くべきコンパクトさとネイティブ URL 互換性を実現する Base64 ベースの圧縮形式です。これは、すべてのベクトルをコンパクトな文字列表現に圧縮した「ネイティブ」データ構造です。この形式をレンダリング可能な形式 (SVG、言語ネイティブの座標配列) に解凍するためのコード例 (.Net、PHP、Ruby) が extras フォルダーに提供されています。データをサーバーに転送する方法の 1 つは JSONP です。JSONP には、実際の URL の長さの制限が 2000 文字以下です (IE によって課せられます)。この圧縮形式はローカル URL と互換性があり、再エンコードは必要ありませんが、ほとんどの非複雑な署名の 2000 文字以内に収まります。
svg (エイリアス画像/svg xml) (エクスポートのみ) (VECTOR) (VECTOR) データ形式は、SVG 画像 (SVG XML テキスト) の署名を生成します。すべてのストロークのノイズが除去され、滑らかになります。この形式は、「見やすさ」と「拡張性の高さ」の中間の優れた形式です。現在、ほとんどのブラウザは SVG の表示をサポートしていますが、この形式は無限に拡大縮小したり、印刷用に拡張したりできます。データはテキストなので、保存や転送が簡単です。 jSignature("getData", "svg") を呼び出すと、""image/svg xml","svg xml here"] 形式の配列が返されます。
(エイリアス画像/svg xml;base64) (エクスポートのみ) (ベクトル) 「svg」プラグインと同じですが、base64 エンコーディングを使用して SVG XML テキストを圧縮します。ただし、多くのブラウザには現在、base64 エンコーダが組み込まれています ( btoa() ) ですが、Internet Explorer などの一部のプラグインには、そうでないものもあります。プラグインには、btoa() のないブラウザで呼び出される、ソフトウェアベースの Base64 エンコーダの独自の (短く効率的な) コピーがあります。 "svgbase64") は、["image/svg xml;base64", "base64 でエンコードされた svg xml here") の配列を返します。この 2 つのコンポーネントの配列は、データ URL 形式の文字 String("data:" data) に簡単に変換できます。 join(","))、または args に変換され、フォーム値としてサーバーに渡されます。
image
(エクスポートのみ) (BITMAP) データ形式基本的に上記の「デフォルト」データ形式と同じですが、MIME タイプとデータが「svg」エクスポートによって生成されるものと同様の配列構造内の別個のオブジェクトになるように解析されます。 Base64","i123i412i341jijalsdfjijl234123i..."]。画像エクスポートフィルターは (やや薄い) ブラウザーのサポートに依存しており、不要なデータを拾ってしまうため、デモンストレーションと開発のみに使用することをお勧めします。
エクスポート/ストレージ形式を選択してください

#jSignature から「イメージ」を取得しようとしているのはわかりますが、自制して近づかないでください。代わりに、ポストプロダクションサーバー側で「base30」または「svg」データをキャプチャし、レンダリングを強化することを検討してください。「ビットマップ」としてエクスポートする場合、画像は実際の描画色、サイズを保持します。

装飾 (署名行) が画像上に表示されます。jSignature が暗い背景のライトペンでデザインされている場合は、すべてのブラウザで動作しない可能性があります。カラーを選択すると、画像上に得られるもの - 暗い背景に、グレーの署名線を覆う明るい描画が表示されます。この画像は、印刷するとほとんど役に立ちません。これは、背景がペンと同じ明るさの場合に当てはまります (例: ペンの色)。赤を表す青）さらに悪いことに、この場合、白黒で印刷すると、画像は単なる濃い灰色の長方形になります。ページの色を変更すると、キャプチャされた画像がその色を身に着けるようになります。