testcanvas.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="../../AFrontEnd/css/animate.css" rel="stylesheet" />
  8. <link href="../../AFrontEnd/css/fontawesome/css/font-awesome.css" rel="stylesheet" />
  9. <link href="../../AFrontEnd/css/bootstrap.css" rel="stylesheet" />
  10. <link href="../../AFrontEnd/css/style.css" rel="stylesheet" />
  11. <script>document.write("<link href='../../AFrontEnd/css/special.css?time=" + new Date().getTime() + "' rel='stylesheet'>");</script>
  12. <script>document.write("<link href='css/formbuilder.css?time=" + new Date().getTime() + "' rel='stylesheet'>");</script>
  13. <style>
  14. html,
  15. body {
  16. margin: 0;
  17. }
  18. .container {
  19. width: calc(100vw - 40px);
  20. height: calc(100vh - 40px);
  21. padding: 20px;
  22. }
  23. .canvas-body {
  24. width: calc(80vw);
  25. height: calc(80vh);
  26. margin: 20px auto;
  27. }
  28. #sign {
  29. background-color: #f3f5f7;
  30. border-radius: 4px;
  31. border: 1px dashed #0F6BFF;
  32. }
  33. .btns {
  34. width: calc(80vw - 40px);
  35. text-align: right;
  36. margin: 0 auto;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <!--<div class="container">
  42. <div id="canvas-body" class="canvas-body">
  43. <canvas id="sign" style="width: 100%; height: 100%;"></canvas>
  44. </div>
  45. <div class="btns">
  46. <button id="reset">重置</button>
  47. <button id="showImg">生成图片</button>
  48. </div>
  49. </div>-->
  50. <div class="sp-layer" id="layer_optionbox" style="width: 600px; max-height: 500px; position: absolute; top: 10.5px; left: 581.5px; display: block;">
  51. <div class="sp-layer-head">
  52. <span class="sp-layer-title">签写意见</span>
  53. <span class="sp-layer-close" title="关闭" onclick="sp.layerhide()">×</span>
  54. </div>
  55. <div class="sp-layer-body" style="max-height:410px; overflow-y:auto;">
  56. <div class="sp-tab" id="layer_optionbox_tabs">
  57. <ul class="sp-tab-menu"><li class="">文字</li><li class="sp-tab-current">手签</li></ul>
  58. <div class="sp-tab-box">
  59. <div class="sp-tab-current sp-tab-hide">
  60. <div class="sp-page">
  61. <div class="sp-col-50"><textarea id="layer_optionbox_textarea" class="sp-textarea" style="height:300px;"></textarea></div>
  62. <div class="sp-col-50" style="border-left:1px solid #dedede; box-sizing:border-box;">
  63. <div class="sp-lh-20">常用语</div>
  64. <div class="sp-page" id="layer_optionbox_patterns" style="height:275px;">
  65. <span class="sp-lh-20">常用语1</span><span class="sp-lh-20">常用语2</span>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="">
  71. <div class="spfb-optionbox-canvas" id="layer_optionbox_canvas_outpart" style="float:left; width:100%; height:300px; position:relative;">
  72. <canvas id="layer_optionbox_canvas" style="width: 100%; height: 300px;"></canvas>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="sp-layer-foot">
  79. <div class="sp-page sp-mt-15">
  80. <span class="sp-btn-blue sp-btn-radius" onclick="sp.layerhide()"> <i class="fa fa-close"></i> 关 闭</span>
  81. <span class="sp-btn-blue sp-btn-radius" onclick="spbld.layer_optionbox_true()"> <i class="fa fa-check"></i> 确 定</span>
  82. </div>
  83. </div>
  84. </div>
  85. <script src="../../AFrontEnd/js/jquery/jquery-1.8.3.min.js"></script>
  86. <script src="../../AFrontEnd/js/laydate/laydate.js"></script>
  87. <script>document.write('<scri' + 'pt src="../../AFrontEnd/js/special/special.js?time=' + new Date().getTime() + '" type="text/javascript"></s' + 'cript>');;</script>
  88. <script src="../../AFrontEnd/plugins/spvld/spvld.js"></script>
  89. <script src="js/spbld.js"></script>
  90. <script>
  91. setTimeout(function () {
  92. spbld.lineCanvas();
  93. },10)
  94. /////重置
  95. //function clear() {
  96. // ctx.clearRect(0, 0, canvas.width, canvas.height);
  97. // if (dataURL) {
  98. // dataURL = '';
  99. // }
  100. //}
  101. //function canvasToBase64() {
  102. // dataURL = canvas.toDataURL();
  103. // alert(dataURL)
  104. //}
  105. //reset.addEventListener('click', clear);
  106. //showImg.addEventListener('click', canvasToBase64);
  107. </script>
  108. <script>
  109. </script>
  110. </body>
  111. </html>