html5 canvas文字涂鸦电子签名板代码

html5 canvas文字涂鸦电子签名板代码

一款非常简单的html5 canvas文字涂鸦电子签名板代码,可以将你的作品输出图片。

使用方法
在页面引入相关mui.min.js、jquery.min.js、jSignature.min.js文件

1
2
3
4
5
6
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript" charset="utf-8">
    mui.plusReady(function() {
        plus.screen.lockOrientation('landscape-secondary');
    });
    $(document).ready(function() {
        $("#signature").jSignature()
    });
    document.getElementById("clear").addEventListener('tap', function() {
        $("#signature").jSignature("reset");
        $("#pic")[0].innerHTML = '';
    });
    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"));
    });
</script>

文件信息:

    0

    发表评论