index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title></title>
  8. <style type="text/css">
  9. html,
  10. body,
  11. canvas {
  12. padding: 0;
  13. margin: 0;
  14. width: 100%;
  15. height: 100%;
  16. overflow-y: hidden;
  17. background-color: transparent;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <canvas id="lime-signature"></canvas>
  23. <script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
  24. <script type="text/javascript" src="./signature.js"></script>
  25. <script>
  26. var signature = null;
  27. var timer = null;
  28. var isStart = false;
  29. console.log = function(...args) {
  30. postMessage(args);
  31. };
  32. // function stringify(key, value) {
  33. // if (typeof value === 'object' && value !== null) {
  34. // if (cache.indexOf(value) !== -1) {
  35. // return;
  36. // }
  37. // cache.push(value);
  38. // }
  39. // return value;
  40. // };
  41. function emit(event, data) {
  42. postMessage({
  43. event,
  44. data: typeof data !== "object" && data !== null ? data : JSON.stringify(data),
  45. });
  46. // cache = [];
  47. }
  48. function postMessage(data) {
  49. uni.postMessage({
  50. data
  51. });
  52. }
  53. function update(v = {}) {
  54. if (signature) {
  55. signature.pen.setOption(v);
  56. } else {
  57. signature = new Signature.Signature({el: "lime-signature"});
  58. canvasEl = signature.canvas.get("el");
  59. signature.pen.setOption(v)
  60. const width = signature.canvas.get("width");
  61. const height = signature.canvas.get("height");
  62. emit({changeSize: {width,height}})
  63. }
  64. }
  65. function clear() {
  66. signature.clear()
  67. }
  68. function undo() {
  69. signature.undo()
  70. }
  71. function isEmpty() {
  72. const isEmpty = signature.isEmpty()
  73. emit({isEmpty});
  74. }
  75. function save(args) {
  76. // delete args.success;
  77. // delete args.fail;
  78. clearTimeout(timer);
  79. timer = setTimeout(() => {
  80. const path = canvasEl.toDataURL()
  81. if (typeof path == "string") {
  82. const index = Math.ceil(path.length / 8);
  83. for (var i = 0; i < 8; i++) {
  84. if (i == 7) {
  85. emit({"success": path.substr(i * index, index)});
  86. } else {
  87. emit({"file": path.substr(i * index, index)});
  88. }
  89. }
  90. } else {
  91. console.error("canvas no data");
  92. emit({"fail": "canvas no data"});
  93. }
  94. }, 30);
  95. }
  96. </script>
  97. </body>
  98. </html>