投稿 搜索

热门文章

当前位置: 站长天下 / 文字广告 / html5 canvas文字涂鸦电子签名板代码

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-20
    阅读:

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

简要教程

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

使用方法

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

<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]-->
<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>