JS実現web署名
8852 ワード
jSignatureがウェブページに手書き署名するプラグイン(html 5手書き署名)は、IE 7~IE 8のようなHTML 5をサポートしないブラウザでFlash埋め込み方式で実現される署名処理である.サポートされているHTML 5のブラウザではデフォルトでcanvasタグ処理署名が採用されており、PNG形式、SVG形式の署名ピクチャを生成することができる.IPADなどのモバイルクライアントで手書き署名を実現するのに非常に適しており、このプラグインはJQueryベース
jSignatureトップページ:http://willowsystems.github.io/jSignature/#/about/
主なコードは次のとおりです.
jSignatureトップページ:http://willowsystems.github.io/jSignature/#/about/
主なコードは次のとおりです.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">script>
<script src="Scripts/jSignature/flashcanvas.js" type="text/javascript">script>
<script src="Scripts/jSignature/jSignature.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
$("#signature").jSignature();
// $(".jSignature").css({ "width": "100%", "height": "100%" });
});
function reset() {
var $sigdiv = $("#signature");
$sigdiv.jSignature("reset");
}
function outputImage() {
var $sigdiv = $("#signature");
var datapair = $sigdiv.jSignature("getData", "image"); // ，
var imagebase64 = datapair[1].replace(/\+/g, '%2B');
$.ajax({
type: "POST",
url: "Default.aspx",
data: "image=" + imagebase64,
success: function (msg) {
var createImage = new Image();
createImage.src = msg;
$(createImage).appendTo($("#img_src"))
}
});
}
function jSignatureTest() {
var $sigdiv = $("#signature");
var datapair = $sigdiv.jSignature("getData", "image"); // ，
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1]
$(i).appendTo($("#image")) // append the image (SVG) to DOM.
}
script>
head>
<body>
<fieldset style="border: 2px solid green; width: 100%; height: 768px;">
<legend> legend>
<div id="signature" style="height: 100%;">
div>
fieldset>
<button type="button" onclick="jSignatureTest()">
button>
<button type="button" onclick="reset()">
button>
<button type="button" onclick="outputImage()">
Image button>
<div id="image" style="margin: 20px">
div>
<div id="img_src">
div>
body>
html>