php触摸屏签名效果,HTML5 中canvas支持触摸屏的签名面板

/**

* 功能：使用该jQuery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。

* 作者：黄金锋 (549387177@qq.com)

* 日期：2015-11-16  13:51:01

* 版本：version 1.0

*/

var WritingPad = function () {

var current = null;

$(function () {

initHtml();

initTable();

initSignature();

if ($(".modal")) {

$(".modal").modal("toggle");

} else {

alert("没用手写面板");

}

$(document).on("click", "#myClose,.close", null, function () {

$('#mymodal').modal('hide');

$("#mymodal").remove();

});

$(document).on("click", "#mySave", null, function () {

var myImg = $('#myImg').empty();

var dataUrl = $('.js-signature').jqSignature('getDataURL');

var img = $('').attr('src', dataUrl);

$(myImg).append($('

').text("图片保存在这里"));

$(myImg).append(img);

});

$(document).on("click", "#myEmpty", null, function () {

$('.js-signature').jqSignature('clearCanvas');

});

$(document).on("click", "#myBackColor", null, function () {

$('#coloRPAnel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn();

//$("canvas").css("background", "#EEEEEE");

$("#btnSave").data("sender", "#myBackColor");

});

$(document).on("click", "#myColor", null, function () {

$('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn();

$("#btnSave").data("sender", "#myColor");

});

$(document).on("mouseover", "#myTable", null, function () {

if ((event.srcElement.tagName == "TD") && (current != event.srcElement)) {

if (current != null) { current.style.backgroundColor = current._background }

event.srcElement._background = event.srcElement.style.backgroundColor;

//$("input[name=DisColor]").css("background-color", event.srcElement.style.backgroundColor);

//var color = event.srcElement.style.backgroundColor;

//var strArr = color.substring(4, color.length - 1).split(',');

//var num = showRGB(strArr);

//$("input[name=HexColor]").val(num);

current = event.srcElement;

}

});

$(document).on("mouseout", "#myTable", null, function () {

if (current != null) current.style.backgroundColor = current._background

});

$(document).on("click", "#myTable", null, function () {

if (event.srcElement.tagName == "TD") {

var color = event.srcElement._background;

if (color) {

$("input[name=DisColor]").css("background-color", color);

var strArr = color.substring(4, color.length - 1).split(',');

var num = showRGB(strArr);

$("input[name=HexColor]").val(num);

}

}

});

$(document).on("click", "#btnSave", null, function () {

$('#colorpanel').css("display", "none");

var typeData = $("#btnSave").data("sender");

var HexColor = $("input[name=HexColor]").val();

var data = $(".js-signature").data();

if (typeData == "#myColor") {

data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor;

$('.js-signature').jqSignature('reLoadData');

}

if (typeData == "#myBackColor") {

data["plugin_jqSignature"]["settings"]["background"] = HexColor;

$('.js-signature').jqSignature('reLoadData');

}

});

$("#mymodal").on('hide.bs.modal', function () {

$("#colorpanel").remove();

$("#mymodal").remove();

$("#myTable").remove();

});

});

function initHtml() {

var html = '

' +

'

' +

'

' +

'

' +

'×Close' +

'

手写面板

' +

'

' +

'

' +

'

' +

'

' +

'

' +

'清空面板' +

'设置背景颜色' +

//'

' +

'设置字体颜色' +

'

//'

'+

'

' +

'

' +

'

' +

'关闭' +

'保存' +

'

' +

'

' +

'

' +

'

' +

'

' +

'

';

$('body').append(html);

}

function initTable() {

var colorTable = "";

var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');

var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');

for (var i = 0; i < 2; i++)

{

for (var j = 0; j < 6; j++)

{

colorTable = colorTable + '

';

colorTable = colorTable + '

';

if (i == 0)

{

colorTable = colorTable + '

';

}

else

{

colorTable = colorTable + '

';

}

//colorTable = colorTable + '

';

for (var k = 0; k < 3; k++)

{

for (l = 0; l < 6; l++)

{

colorTable = colorTable + '

';

}

}

colorTable = colorTable + '

';

}

}

colorTable =

'

+ colorTable + '

' +

'

'

' +

'

' +

'

'

' +

'

' +

'

' +

'

确认' +

'

' +

'

' +

'

' +

'

' +

'

';

$("#colorpanel").append(colorTable);

}

function initSignature() {

if (window.requestAnimFrame) {

var signature = $("#mySignature");

signature.jqSignature({ width: 500, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: false });

//{ width: 600, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: true }

} else {

alert("请加载jq-signature.js");

return;

}

}

function showRGB(arr) {

hexcode = "#";

for (x = 0; x < 3; x++) {

var n = arr[x];

if (n == "") n = "0";

if (parseInt(n) != n)

return alert("RGB颜色值不是数字！");

if (n > 255)

return alert("RGB颜色数字必须在0-255之间！");

var c = "0123456789ABCDEF", b = "", a = n % 16;

b = c.substr(a, 1); a = (n - a) / 16;

hexcode += c.substr(a, 1) + b

}

return hexcode;

}

function init() {

}

return {

init: function () {

init();

}

};