移动端签名板的实现

最新推荐文章于 2023-09-21 15:36:02 发布
最新推荐文章于 2023-09-21 15:36:02 发布
阅读量8.2k 收藏 3
点赞数 2
分类专栏： MUI 移动app 文章标签： 移动 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiger_gy/article/details/69396324
版权

移动端签名板的实现

直接上代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/mui.css" />
		<script type="text/javascript" src="../js/mui.js" ></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
	    <script src="../js/bootstrap.js"></script>
	    <link href="../css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body οnlοad="redea()">
	    <!-- 主页面标题 -->
	    <header class="mui-bar mui-bar-nav">
	    	<a class=" mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a> 
	        <h1 class="mui-title" id="title">标题</h1>
	    </header>
	    <!-- 主页面内容容器 -->
	    <div class="mui-content">
	    	<div class="mui-scroll">
		      <!--  <div class=" mui-media" id="value" style="word-break:break-all">ppp1111</div><br>-->
		        <div style="margin-top:20px;">
		        	<h3>处理者签名：</h3>
	                <div class="js-signature" id="mySignature"></div>
	                <div>
	                    <button type="button" class="mui-btn" id="myBackColor">选择背景颜色</button>
	                    <button type="button" class="mui-btn" id="myColor">选择字体颜色</button>
	                    <div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>
	                    <button type="button" class="mui-btn" id="myEmpty">重写</button>
	                    <button type="button" class="mui-btn" id="mySave">保存</button>
	                </div>
	                <div id="myImg"></div>	                
	           </div>
           </div>
	    </div>
	</body>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function(){
			
		});
		function redea(){
			new WritingPad();
		}
	</script>
</html>
<script type="text/javascript">
/**
 * 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。
 */

(function (window, document, jQuery) {
    'use strict';

  // 获取绘制屏幕的规则间隔
  window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimaitonFrame ||
      function (callback) {
        window.setTimeout(callback, 1000/60);
      };
  })();

  /*
  * 插件构造函数
  */

  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元素/对象
    this.element = element;
    this.jQueryelement = jQuery(this.element);
    this.canvas = false;
    this.jQuerycanvas = false;
    this.ctx = false;
    // Drawing state
    this.drawing = false;
    this.currentPos = {
      x: 0,
      y: 0
    };
    this.lastPos = this.currentPos;
    // 确定插件的设置
    this._data = this.jQueryelement.data();
    this.settings = jQuery.extend({}, defaults, options, this._data);
    // 初始化插件
    this.init();
  }

  Signature.prototype = {
    // 初始化签名画布
    init: function() {
      // 设置画布
      this.jQuerycanvas = jQuery(canvasFixture).appendTo(this.jQueryelement);
      this.jQuerycanvas.attr({
        width: this.settings.width,
        height: this.settings.height
      });
      this.jQuerycanvas.css({
        boxSizing: 'border-box',
        width: this.settings.width + 'px',
        height: this.settings.height + 'px',
        border: this.settings.border,
        background: this.settings.background,
        cursor: 'crosshair'
      });
      //将画布安装到父宽
      if (this.settings.autoFit === true) {
        this._resizeCanvas();
      }
      this.canvas = this.jQuerycanvas[0];
      this._resetCanvas();
      //设置鼠标事件
      this.jQuerycanvas.on('mousedown touchstart', jQuery.proxy(function(e) {
        this.drawing = true;
        this.lastPos = this.currentPos = this._getPosition(e);
      }, this));
      this.jQuerycanvas.on('mousemove touchmove', jQuery.proxy(function(e) {
        this.currentPos = this._getPosition(e);
      }, this));
      this.jQuerycanvas.on('mouseup touchend', jQuery.proxy(function(e) {
        this.drawing = false;
        // 触发更改事件
        var changedEvent = jQuery.Event('jq.signature.changed');
        this.jQueryelement.trigger(changedEvent);
      }, this));
      // 触摸画布时防止文件滚动
      jQuery(document).on('touchstart touchmove touchend', jQuery.proxy(function(e) {
        if (e.target === this.canvas) {
          e.preventDefault();
        }
      }, this));
      // 开始画
      var that = this;
      (function drawLoop() {
        window.requestAnimFrame(drawLoop);
        that._renderCanvas();
      })();
    },
    //重置的画布
    clearCanvas: function() {
      this.canvas.width = this.canvas.width;
      this._resetCanvas();
    },
    // 把画布的内容为Base64编码数据的URL
    getDataURL: function() {
      return this.canvas.toDataURL();
    },

    reLoadData: function () {
        this.jQuerycanvas.remove();
        this._data = this.jQueryelement.data();
        this.init();
    },
    // 获取鼠标/触摸的位置
    _getPosition: function(event) {
      var xPos, yPos, rect;
      rect = this.canvas.getBoundingClientRect();
      event = event.originalEvent;
      // 触摸事件
      if (event.type.indexOf('touch') !== -1) { // event.constructor === TouchEvent
        xPos = event.touches[0].clientX - rect.left;
        yPos = event.touches[0].clientY - rect.top;
      }
      // 鼠标事件
      else {
        xPos = event.clientX - rect.left;
        yPos = event.clientY - rect.top;
      }
      return {
        x: xPos,
        y: yPos
      };
    },
    // 将签名渲染到画布
    _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;
      }
    },
    //重置画布上下文
    _resetCanvas: function() {
      this.ctx = this.canvas.getContext("2d");
      this.ctx.strokeStyle = this.settings.lineColor;
      this.ctx.lineWidth = this.settings.lineWidth;
    },
    // 调整画布元素的大小
    _resizeCanvas: function() {
      var width = this.jQueryelement.outerWidth();
      this.jQuerycanvas.attr('width', width);
      this.jQuerycanvas.css('width', width + 'px');
    }
  };

  /*
  * 插件和初始化
  */

  jQuery.fn[pluginName] = function ( options ) {
    var args = arguments;
    if (options === undefined || typeof options === 'object') {
      return this.each(function () {
        if (!jQuery.data(this, 'plugin_' + pluginName)) {
          jQuery.data(this, 'plugin_' + pluginName, new Signature( this, options ));
        }
      });
    } 
    else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
      var returns;
      this.each(function () {
        var instance = jQuery.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') {
          jQuery.data(this, 'plugin_' + pluginName, null);
        }
      });
      return returns !== undefined ? returns : this;
    }
  };

})(window, document, jQuery);
</script>

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

var WritingPad = function () {

    var current = null;

    jQuery(function () {

        initTable();

        initSignature();

        if (jQuery(".modal")) {
            jQuery(".modal").modal("toggle");
        } else {
            mui.alert("没用手写面板");
        }

        jQuery(document).on("click", "#mySave", null, function () {
        	var myImg=jQuery("#myImg").empty();
            var dataUrl = jQuery('.js-signature').jqSignature('getDataURL');
            var img=jQuery('<img>').attr("src",dataUrl);
            jQuery(myImg).append(img);

        });

        jQuery(document).on("click", "#myEmpty", null, function () {
            jQuery('.js-signature').jqSignature('clearCanvas');
        });

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

            jQuery('#colorpanel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn();
            jQuery("#btnSave").data("sender", "#myBackColor");
        });

        jQuery(document).on("click", "#myColor", null, function () {
            jQuery('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn();
            jQuery("#btnSave").data("sender", "#myColor");
        });

        jQuery(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;
                current = event.srcElement;
            }

        });

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

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

        });

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

            if (event.srcElement.tagName == "TD") {
                var color = event.srcElement._background;
                if (color) {
                    jQuery("input[name=DisColor]").css("background-color", color);
                    var strArr = color.substring(4, color.length - 1).split(',');
                    var num = showRGB(strArr);
                    jQuery("input[name=HexColor]").val(num);
                }
            }

        });

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

            jQuery('#colorpanel').css("display", "none");
            var typeData = jQuery("#btnSave").data("sender");
            var HexColor = jQuery("input[name=HexColor]").val();
            var data = jQuery(".js-signature").data();
            if (typeData == "#myColor") {
                data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor;
                jQuery('.js-signature').jqSignature('reLoadData');
            }
            if (typeData == "#myBackColor") {

                data["plugin_jqSignature"]["settings"]["background"] = HexColor;
                jQuery('.js-signature').jqSignature('reLoadData');
            }
        });

        jQuery("#mymodal").on('hide.bs.modal', function () {
            jQuery("#colorpanel").remove();
            jQuery("#mymodal").remove();
            jQuery("#myTable").remove();
        });

    });

    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="hidden" 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>';
        jQuery("#colorpanel").append(colorTable);
    }

    function initSignature() {

        if (window.requestAnimFrame) {
            var signature = jQuery("#mySignature");
            signature.jqSignature({ width:300, height: 260, border: '1px solid #CDC9A5', background: '#EEEED1', lineColor: '#969696', lineWidth: 2, autoFit: false });
        } else {

            mui.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 mui.alert("RGB颜色值不是数字！");
            if (n > 255)
                return mui.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();
        }
    };
}
</script>
效果图

 如果帮助到您，顶一个得意！
Guancya
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript 手写电子签名
05-10
javascript手写电子签名生成图片
【js实现手写签名板】canvas
m0_45382009的博客
11-26 4742
项目多个功能模块都用到签名，所以进行了封装，需要用到的签名的地方，只需要调用一下封好的signature函数，即可返回保存的签名照片（格式：base64，也可自行修改） <!-- 项目的html页面 --> <div class="popverBox"> <div id="signSure" class="signSure"> <div class="topTitle">请写下您的名字</div>
文档写作利器：Markdown
热门推荐
xcbeyond|疯狂源自梦想，技术成就辉煌
02-13 2万+
一、前言 无论你是软件开发者，还是互联网写作者，为了使自己写的文档或作品更好的流通，便于在不同场合、不同环境、不同人群的查看，亟需寻求一种通用、便于扭转、留存的文档格式。 在这之前、现在或者今后，你可能会存在以下这些困扰： 作为软件开发者、架构师，写的设计文档到底应该以什么样的格式来保存呢？是word、txt、pdf，还是html呢？这些文档格式，在不同情况下，可能都会存在。有时为了便于评审、修...
Gstreamer插件教程2.2—编写一个插件(Writing a Plugin)：详解pads(Specifying the pads)
hwmstudent的博客
02-11 549
正如前面所说，pad是数据进出element时的端口，这使得pad在element的创建过程中成为非常重要的一步。在boilerplate代码中，我们已经看到了静态pad模板是如何通过element class来注册pad模板的。这里，我们将看到如何创建一个真实的element：用一个_event()-函数来配置一个特殊的格式。还将看到如何注册函数，使得数据流通过element。 在element的_init()函数中，你从pad模板中创建的pad已经在_class_init()函数中被注册到element
移动端使用canvas做签名板
程序员超超的博客
03-27 578
做手写板应用场景应该还是很常见的，比如做签名。在pages里面使用，我在里面使用了tailwind。为例子看一下基本结构。
H5 签字 jSignature插件
weixin_30314631的博客
07-11 1061
以下签名支持移动端及PC端,单独用canvas会不兼容pc,目前兼容最好的使用 jSignature index.html <!doctype html> <html lang="zh"> <head> <meta http-equiv="content-type" content="text/html; charset=...
vue移动端手写电子签名的实现方式
02-07 3207
最近项目组要求做一个移动端手写签名的组件 一共找了两种方案，一种不需要安装插件，一种是安装vueEsign插件
使用vue3.0实现一个移动端电子签名组件
qq_39207066的博客
11-29 2273
因业务需求，前段时间写了一个电子签名组件，在这里记录一下，绘图需求，首先肯定需要使用 canvas标签，考虑到在移动端使用，所以选择使用touch事件。 首先奉上html结构（该组件为横屏展示）： <div class="signName" :style="{top:0,left:differ+'px'}"> <div class="close" @click="close"><img src="../assets/images/close.png" alt="
移动端VUE-H5手写电子签名的实现（生成base64图片）- 横版
最新发布
zhaotian2017的博客
09-21 1037
实现形式：html页面中引入vue方式。
uniapp实现移动端签名板功能完整代码，导入即可使用
11-20
内容概要：压缩包中是在uniapp中实现移动端签名板的功能，导入即可使用，签名板功能包括，手写签名，保存签名，清除签名，关闭及打开签名板。通过子组件的形式引入开发，支持一个界面调用多个签名板使用，底层是...
移动端手写签名js
05-07
javascript移动端手写签名，通过canvas绘制，base64图片
移动端签名代码
06-27
mui.plusReady(function() { plus.screen.lockOrientation('landscape-secondary'); }); $(document).ready(function() { $("#signature").jSignature() }); document.getElementById("clear").addEventListener('tap', function() { $("#signature").jSignature("reset"); $("#pic")[0][removed] = ''; }); document.getElementById("save").addEventListener('tap', function() { var datapair = $("#signature").jSignature("getData", "image"); var array = datapair.splice(","); mui.toast(array[1]); }); document.getElementById("export").addEventListener('tap', function() { var datapair = $("#signature").jSignature("getData", "image"); var i = new Image(); i.src = "data:" + datapair[0] + "," + datapair[1]; $(i).appendTo($("#pic")); });
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
手机移动端签名插件
09-13
jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运动坐标（又名向量图）允许签名呈现更大的灵活性。支持主要的台式机，平板电脑和手机浏览器的支持。
Vue利用canvas实现移动端手写板的方法
12-29
本文介绍了Vue利用canvas实现移动端手写板的方法，分享给大家，具体如下： <!--touchstart,touchmove,touchend,touchcancel 这--> <button type= v-on:click=clear>清除</button> <...
vue使用canvas实现移动端手写签名
01-18
基于vue使用canvas实现移动端手写签名！ 之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了...
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
HBuilder+个推的推动消息（一）
tiger_gy的博客
06-08 1万+
HBuilder+个推的推动消息 导读：现在很多APP都有推送功能，好处可以让用户及时的收到消息，提高APP的活跃度，坏的方面有如果频繁的发送消息有课能导致用户直接卸载，下面我将自己实践中的总结一下（本文介绍的个推服务器直接发送消息到手机移动端，之后还会介绍由后台服务器发送到个推服务器在发送到终端APP）。 1、首先我们要到个推的官网上注册一个账号。个推官网    之后的步骤我就不做详细的
HBuilder的热更新
tiger_gy的博客
06-08 1万+
HBuilder 的热更新 导读：我在移动APP开发之中特别困扰appStore的更新问题，没次改变点东西都需要重新发包进行审核，之前还不知道HBuilder有这个热更新的功能，后来听同事说可以热更新，不用每次都上传苹果商店进行审核，得到这个消息我很兴奋，于是在网上查阅了资料，自己变行动起来，一下是我的总结。  1、首先我们要获取当前安装包的version，将获取到当前APP安装的版本与服务器
移动端实现客户签名功能
06-14
3. 使用手写板：可以通过连接一个手写板，实现在移动端手写签名的功能。 需要注意的是，在存储签名时，需要将签名转换为图片格式，并且考虑安全性，避免签名被篡改。同时，需要考虑用户体验，确保签名的操作流畅和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值