经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
HTML5 canvas 在线涂鸦
来源:cnblogs  作者:青苗科技  时间:2019/6/10 13:39:39  对本文有异议

插件地址

http://bencentra.github.io/jq-signature/

采用技术

  • jq-signature.min.js
  • Developed using jQuery 2.1.4.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script src="jquery.min.js"></script>
  7. <script src="jq-signature.min.js"></script>
  8. <script>
  9. $(function(){
  10. $('.js-signature').jqSignature();
  11. })
  12. function clearCanvas() {
  13. $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
  14. $('.js-signature').eq(1).jqSignature('clearCanvas');
  15. $('#saveBtn').attr('disabled', true);
  16. }
  17. function saveSignature() {
  18. $('#signature').empty();
  19. var dataUrl = $('.js-signature').jqSignature('getDataURL');
  20. var img = $('<img>').attr('src', dataUrl);
  21. $('#signature').append($('<p>').text("Here's your signature:"));
  22. $('#signature').append(img);
  23. }
  24. $('.js-signature').eq(1).on('jq.signature.changed', function() {
  25. $('#saveBtn').attr('disabled', false);
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
  31. <p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button>?
  32. <button id="saveBtn" class="btn btn-default" onclick="saveSignature();" >Save Signature</button></p>
  33. <div id="signature">
  34. <p><em>Your signature will appear here when you click "Save Signature"</em></p>
  35. </div>
  36. </body>
  37. </html>

截图

原文链接:http://www.cnblogs.com/qingmiaokeji/p/10988911.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号