转载

HTML5 中canvas支持触摸屏的签名面板

1.前言

最近实在是太忙了，从国庆之后的辞职，在慢慢的找工作，到今天在现在的这家公司上班大半个月了，太多的心酸泪无以言表，面试过程中，见到的坑货公司是一家又一家，好几家公司自己都只是上一天班就走了，其中有第一天上班就加班到10点的，有一家公司在体育西路那边，太远，第一天回家挤公交也是太累，以前上班都是走路上班的，自己确实不适合挤公交，还有的公司面试的时候和你说什么大数据，性能优化什么的，进公司一看，他们就是用的最简单的三层，没有什么设计模式，总之太多心酸，幸运的是现在这家公司还不错，找工作就是要宁缺毋滥。

2.canvcas标签

canvas基础教程： <canvas> 标签定义图形，比如图表和其他图像。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。来公司一个月了主要也是学习为主，我是做后台开发，以前也没有用过Oracle数据库，这一个月也主要是学习H5的一些新特新，还有就是css3.0，在就是Oracle在服务器上面的安装部署，一些数据导入导出，数据备份啥的，前端的东西都比较差，现在也是一个学习的机会，就当好好学习了。

3.手写签名面板

公司做的是自动化办公OA系统，一些审核的地方需要加入一些手写签名的功能，刚开始做这个也是没有思路，在网上也找了一下资料，后来发现H5有这个canvcas新标签，感到格外是欣喜。于是拿过来试一下，还真可以。

HTML5 中canvas支持触摸屏的签名面板 HTML5 中canvas支持触摸屏的签名面板

4.页面代码

@{  Layout = null; } <!DOCTYPE html> <html> <head>  <meta name="viewport" content="width=device-width" />  <title>Testpage</title>  <script src="~/Assets/jquery-2.1.1.js"></script>  <script src="~/Assets/bootstrap/bootstrap.js"></script>  <link href="~/Assets/bootstrap/bootstrap.css" rel="stylesheet" />  <script src="~/Scripts/WritingPad.js"></script>  <script src="~/Assets/jq-signature.js"></script> </head> <body style="background-color:#b6ff00">  <button class="btn btn-primary" type="button" style="position:relative">点击我</button> </body> </html> <script>  $(function () {   $(".btn,.btn-primary").click(function () {    var wp = new WritingPad();    //wp.init();   });  }); </script>

5.脚本代码一

/**  * 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。  * 作者：黄金锋 (549387177@qq.com)  * 日期：2015-11-15  15:51:01  * 版本：version 1.0  */  (function (window, document, $) {     'use strict';    // Get a regular interval for drawing to the screen   window.requestAnimFrame = (function (callback) {     return window.requestAnimationFrame ||        window.webkitRequestAnimationFrame ||       window.mozRequestAnimationFrame ||       window.oRequestAnimationFrame ||       window.msRequestAnimaitonFrame ||       function (callback) {         window.setTimeout(callback, 1000/60);       };   })();    /*   * Plugin Constructor   */    var pluginName = 'jqSignature',       defaults = {         lineColor: '#222222',         lineWidth: 1,         border: '1px dashed #CCFF99',         background: '#FFFFFF',         width: 500,         height: 200,         autoFit: false       },       canvasFixture = '<canvas></canvas>';    function Signature(element, options) {     // DOM elements/objects     this.element = element;     this.$element = $(this.element);     this.canvas = false;     this.$canvas = false;     this.ctx = false;     // Drawing state     this.drawing = false;     this.currentPos = {       x: 0,       y: 0     };     this.lastPos = this.currentPos;     // Determine plugin settings     this._data = this.$element.data();     this.settings = $.extend({}, defaults, options, this._data);     // Initialize the plugin     this.init();   }    Signature.prototype = {     // Initialize the signature canvas     init: function() {       // Set up the canvas       this.$canvas = $(canvasFixture).appendTo(this.$element);       this.$canvas.attr({         width: this.settings.width,         height: this.settings.height       });       this.$canvas.css({         boxSizing: 'border-box',         width: this.settings.width + 'px',         height: this.settings.height + 'px',         border: this.settings.border,         background: this.settings.background,         cursor: 'crosshair'       });       // Fit canvas to width of parent       if (this.settings.autoFit === true) {         this._resizeCanvas();       }       this.canvas = this.$canvas[0];       this._resetCanvas();       // Set up mouse events       this.$canvas.on('mousedown touchstart', $.proxy(function(e) {         this.drawing = true;         this.lastPos = this.currentPos = this._getPosition(e);       }, this));       this.$canvas.on('mousemove touchmove', $.proxy(function(e) {         this.currentPos = this._getPosition(e);       }, this));       this.$canvas.on('mouseup touchend', $.proxy(function(e) {         this.drawing = false;         // Trigger a change event         var changedEvent = $.Event('jq.signature.changed');         this.$element.trigger(changedEvent);       }, this));       // Prevent document scrolling when touching canvas       $(document).on('touchstart touchmove touchend', $.proxy(function(e) {         if (e.target === this.canvas) {           e.preventDefault();         }       }, this));       // Start drawing       var that = this;       (function drawLoop() {         window.requestAnimFrame(drawLoop);         that._renderCanvas();       })();     },     // Clear the canvas     clearCanvas: function() {       this.canvas.width = this.canvas.width;       this._resetCanvas();     },     // Get the content of the canvas as a base64 data URL     getDataURL: function() {       return this.canvas.toDataURL();     },      reLoadData: function () {         this.$canvas.remove();         this._data = this.$element.data();          //for (var i in this.settings) {         //    alert(i+":"+this.settings[i]);         //}          //this.settings = $.extend({}, defaults, this._data);         this.init();     },     // Get the position of the mouse/touch     _getPosition: function(event) {       var xPos, yPos, rect;       rect = this.canvas.getBoundingClientRect();       event = event.originalEvent;       // Touch event       if (event.type.indexOf('touch') !== -1) { // event.constructor === TouchEvent         xPos = event.touches[0].clientX - rect.left;         yPos = event.touches[0].clientY - rect.top;       }       // Mouse event       else {         xPos = event.clientX - rect.left;         yPos = event.clientY - rect.top;       }       return {         x: xPos,         y: yPos       };     },     // Render the signature to the canvas     _renderCanvas: function() {       if (this.drawing) {         this.ctx.moveTo(this.lastPos.x, this.lastPos.y);         this.ctx.lineTo(this.currentPos.x, this.currentPos.y);         this.ctx.stroke();         this.lastPos = this.currentPos;       }     },     // Reset the canvas context     _resetCanvas: function() {       this.ctx = this.canvas.getContext("2d");       this.ctx.strokeStyle = this.settings.lineColor;       this.ctx.lineWidth = this.settings.lineWidth;     },     // Resize the canvas element     _resizeCanvas: function() {       var width = this.$element.outerWidth();       this.$canvas.attr('width', width);       this.$canvas.css('width', width + 'px');     }   };    /*   * Plugin wrapper and initialization   */    $.fn[pluginName] = function ( options ) {     var args = arguments;     if (options === undefined || typeof options === 'object') {       return this.each(function () {         if (!$.data(this, 'plugin_' + pluginName)) {           $.data(this, 'plugin_' + pluginName, new Signature( this, options ));         }       });     }      else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {       var returns;       this.each(function () {         var instance = $.data(this, 'plugin_' + pluginName);         if (instance instanceof Signature && typeof instance[options] === 'function') {             var myArr=Array.prototype.slice.call( args, 1 );             returns = instance[options].apply(instance, myArr);         }         if (options === 'destroy') {           $.data(this, 'plugin_' + pluginName, null);         }         //if (options === 'reLoadData') {         //    //this.$canvas.remove();         //    $.data(this, 'plugin_' + pluginName, null);         //    this._data = this.$element.data();         //    this.settings = $.extend({}, defaults, options, this._data);         //    this.init();         //}       });       return returns !== undefined ? returns : this;     }   };  })(window, document, jQuery);

6.脚本代码二

/**  * 功能：使用该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 = $('<img>').attr('src', dataUrl);    $(myImg).append($('<p>').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 = '<div class="modal" id="mymodal">' +    '<div class="modal-dialog">' +     '<div class="modal-content">' +      '<div class="modal-header">' +       '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +       '<h4 class="modal-title">手写面板</h4>' +      '</div>' +      '<div class="modal-body">' +       '<div class="js-signature" id="mySignature">' +        '</div>' +        '<div>' +        '<button type="button" class="btn btn-default" id="myEmpty">清空面板</button>' +        '<button type="button" class="btn btn-default" id="myBackColor">设置背景颜色</button>' +        //'<div style="position:absolute;relative">' +        '<button type="button" class="btn btn-default" id="myColor">设置字体颜色</button>' +        '<div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>' +        //'</div>'+        '</div>' +      '</div>' +      '<div class="modal-footer">' +       '<button type="button" class="btn btn-default" id="myClose">关闭</button>' +       '<button type="button" class="btn btn-primary" id="mySave">保存</button>' +       '<div id="myImg">' +       '<div>' +      '</div>' +     '</div>' +    '</div>' +   '</div>';   $('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 + '<tr height=12>';     colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';     if (i == 0)     {      colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '"></td>';     }     else     {      colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '"></td>';     }     //colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';     for (var k = 0; k < 3; k++)     {      for (l = 0; l < 6; l++)      {       colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '"></td>';      }     }     colorTable = colorTable + '</tr>';    }   }   colorTable =   '<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">'   + colorTable + '</table>' +   '<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">' +   '<tr style="height:30px">' +   '<td colspan=21 bgcolor=#cccccc>' +   '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' +   '<tr>' +   '<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' +   '<td width="3"><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>' +    '<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>' +   '</tr>' +   '</table>' +   '</td>' +   '</tr>' +   '</table>';   $("#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();   }  }; }
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：605 人
  • 运行天数：4,439天
  • 最后更新：2024年12月22日19点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG