移动端实现手写签字

最新推荐文章于 2023-07-27 11:05:57 发布
最新推荐文章于 2023-07-27 11:05:57 发布
阅读量6.5k 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40530899/article/details/103495666
版权

参考地址：地址

index.html

<!doctype html>
<html lang="zh">
<head>
    <meta http-equiv="content-type"  content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div class="htmleaf-container">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>请签名:</p>
                <div class="js-signature" data-background="transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAADICAYAAAA0n5+2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGQjExNjZFNUMzRDExRThBMEVBODlEOEI3QUZEQTA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGQjExNjZGNUMzRDExRThBMEVBODlEOEI3QUZEQTA3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0ZCMTE2NkM1QzNEMTFFOEEwRUE4OUQ4QjdBRkRBMDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0ZCMTE2NkQ1QzNEMTFFOEEwRUE4OUQ4QjdBRkRBMDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4uosxwAAAJuUlEQVR42uza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)" style="background-size:cover;"></div>
                <p>
                    <button id="saveBtn" class="btn btn-default" disabled>预览</button>&nbsp;
                    <button id="clearBtn" class="btn btn-default" >重写</button>
                    <input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
                </p>
                <div id="signature">
                    <p>写上签名并点击预览</p>
                    <div></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="jq-signature.js"></script>
<script type="text/javascript">
    $(document).on('ready', function() {
        if ($('.js-signature').length) {
            var _width = 600;
            var _height = 200;
            var rate = 0;
            if(screen.width<_width){
                rate = _width/screen.width;
                _width = _width/rate - 15;
                _height = _height/rate ;
            }
            $('.js-signature').jqSignature({autoFit: false,width:_width,height: _height});
        }
        $('.js-signature').on('jq.signature.changed', function() {
            $('#saveBtn').attr('disabled', false);
        });
        $('#clearBtn').on('click',function(){
            $('#signature').html('<p>写上签名并点击预览</p><div></div>');
            $('.js-signature').jqSignature('clearCanvas');
            $('#saveBtn').attr('disabled', true);
        })

        $('#saveBtn').on('click',function(){
            var dataUrl = $('.js-signature').jqSignature('getDataURL');
            console.debug(dataUrl);
            var img = $('<img>').attr('src', dataUrl);
            $('#signature p').html($('<p>').text("签名预览如下:"));
            $('#signature div').html(img);
        })

    });
    function imgChange(e) {
        console.info(e.target.files[0]);//图片文件
        var dom =$("input[id^='imgTest']")[0];
        console.info(dom.value);
        console.log(e.target.value);
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                var img = $('<img>').attr('src',this.result);
                $('#signature div').html(img);
                $('.js-signature').jqSignature('setData',this.result);
                $('#saveBtn').attr('disabled', false);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }




</script>
</body>
</html>

jq-signature.js

(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 #AAAAAA',
            background: '#FFFFFF',
            width: 300,
            height: 100,
            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',
                'background-size':'cover'
            });
            // Fit canvas to width of parent
            if (this.settings.autoFit === true) {
                this._resizeCanvas();
                // TO-DO - allow for dynamic canvas resizing
                // (need to save canvas state before changing width to avoid getting cleared)
                // var timeout = false;
                // $(window).on('resize', $.proxy(function(e) {
                //   clearTimeout(timeout);
                //   timeout = setTimeout($.proxy(this._resizeCanvas, this), 250);
                // }, this));
            }
            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();
        },
        setData: function(data){
            this.clearCanvas();
            var ctx = this.canvas.getContext("2d");
            var img = new Image();
            var _max_width = this.settings.width;
            var _max_height = this.settings.height;
            img.src=data;

            img.onload = function(){
                // 图片尺寸
                var img_w = img.naturalWidth;
                var img_h = img.naturalHeight;
                // 缩略后尺寸
                var dimg_w ;
                var dimg_h ;

                // 计算缩略尺寸
                dimg_w = _max_width;
                dimg_h = Math.ceil(dimg_w*img_h/img_w);

                if(dimg_h>_max_height){
                    dimg_h = _max_height;
                    dimg_w = Math.ceil(dimg_h*img_w/img_h);
                }
                console.debug(img_w,img_h,_max_width,_max_height);
                ctx.drawImage(img,0,0,dimg_w, dimg_h);
            }
        },
        // 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') {
                    returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
                }
                if (options === 'destroy') {
                    $.data(this, 'plugin_' + pluginName, null);
                }
            });
            return returns !== undefined ? returns : this;
        }
    };

})(window, document, jQuery);
历经沧桑的少年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery实现手写签名
weixin_42027503的博客
11-21 1310
话不多说上代码，本文参考自大神https://blog.csdn.net/weixin_30482181/article/details/96817268 css <style> body,html{ margin: 0; padding: 0; height: 100%; } #canvas { border:0.01rem solid #f30;
JQ手写签名.rar
06-09
js包封装好了，页面代码简单易懂，返回形式多样化可自行选择。简单实用，推荐！！！兼容性高。没有笔锋的。
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
jQuery手写签名插件jSignature
11-14
jQuery手写签名插件jSignature，官方github下载，方便找不到的朋友下载。支持移动端。手写，鼠标都可以，亲测好用
JSignature手写签名的实现 （JQuery实现手写电子签名）
探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南，涵盖从基础到高级话题，旨在提升编程效率和技能。
02-01 4027
JSignature手写签名的实现 jSignature.js是实现手写签名的插件，由于jSignature.js是基于jQuery的，所以使用时需要先引入jQuery。 具体使用方法如下： 第一步，下载jSignature.js,从哪下载呢？https://github.com/brinley/jSignature 感谢GitHub 第二步，引入jQuery 和jSignature.js 第三步，生成html结构 <div id="signature" style="heig...
移动端 手写签名实现 （jSignature.js）
weixin_44589491的博客
03-01 5254
疫情期间的社区出入系统需求 提交体温前需要手写签名 实现方法 引入jQuery.js （jSignature是基于jquery的插件 所以要先引入jQuery） 引入jSignature.js 下载地址https://github.com/brinley/jSignature html结构 <div class="container"> <div id="sign...
vue使用canvas实现移动端手写签名
10-14
主要为大家详细介绍了基于vue使用canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+canvas实现移动端手写签名
10-15
主要为大家详细介绍了vue+canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5实现电子签名
chaixing1的博客
03-26 1221
html 实现电子签名
jQuery手写签名在线生成器.zip
07-04
jQuery手写签名在线生成器基于jSignature.min.js制作，可提取前面数据(native、image、base30、svg等)，生成图片。
jquery实现手写输入签名
12-26
jquery实现手写输入签名，不需要任何硬件支持。 采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片，并把图片保存成字符串，根据字符串可以回显到页面。
移动端手写签名 手写签名
06-27
移动端手写签名，通过canvas绘制， 最后生成base64图片。移动端手写签名，通过canvas绘制， 最后生成base64图片
手写签名插件（PC端和移动端可用）
12-20
jQuery手写签名插件jSignature，jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运动坐标（又名向量图）允许签名呈现更大的灵活性。支持主要的台式机，平板电脑和手机浏览器的支持。HTML5 Canvas元素默认情况下使用。我们依傍基于Flash的Canvas元素模拟器（FlashCanvas）时，不支持浏览器的实际画布（ie8 以下）
移动端签名html2canvas踩坑总结
最新发布
aholic2017的博客
07-27 394
最近开发一个移动端签名，并将签名合成生成图片上传服务器的功能。主要用到了canva和html2canvas，签字就不说了，说下html2canvas在合成图片时遇到了一些坑。
用jq中jSignature做手动签名
weixin_33933118的博客
03-31 426
<!DOCTYPE html><html lang="zh-CN"><head> <title>手写板签名demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="UTF-8"...
移动端手写签名
m0_61163745的博客
03-25 750
可以用组件的方式实现！ <van-popup v-model="showss" get-container="body" position="bottom" :style="{ height: '60%' }" @open="openeName('showss',showss)" @close="closePop('showss')"> <signCanvas@setshow="setshow"@signImg="signImg"></sig.
移动端书写签名
weixin_47297537的博客
03-27 166
【代码】移动端书写签名。
Vue中怎么实现手写签字
03-31
Vue中可以使用HTML5的Canvas API来实现手写签字。 首先在Vue组件中添加一个canvas元素，然后在mounted钩子函数中获取canvas元素的上下文对象，然后监听鼠标事件，在鼠标按下的时候开始绘制，鼠标松开的时候结束绘制...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值