目录

开箱可用, 此项目的作者在代码中做了详细的注释。

https://github.com/941477276/Tablet/tree/master

将它集成到你的项目中需要四个文件。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
  6.     <meta name="format-detection" content="telephone=no, email=no" />
  7.     <meta name="wap-font-scale" content="no">
  8.     <meta name="apple-touch-fullscreen" content="yes" />
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10.     <meta name="HandheldFriendly" content="true">
  11.     <meta name="MobileOptimized" content="320">
  12.     <meta name="screen-orientation" content="portrait">
  13.     <meta name="x5-orientation" content="portrait">
  14.     <meta name="x5-page-mode" content="app">
  15.     <meta name="msapplication-tap-highlight" content="no">
  16.     <meta name="apple-mobile-web-app-capable" content="yes">
  17.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  18.     <title>用户签名</title>
  19.     <link rel="stylesheet" href="your-path/colpick.css" />
  20.     <style>
  21.         body,canvas{
  22.             padding: 0;
  23.             margin: 0;
  24.             background-color: #f0f0f0;
  25.         }
  26.         *{
  27.             box-sizing: border-box;
  28.             padding: 0;
  29.             margin: 0;
  30.         }
  31.         .container{
  32.             height: 100%;
  33.         }
  34.         .container .-tablet,
  35.         .container .-tablet-container,
  36.         .container .-canvas-wrapper{
  37.             height: 100%;
  38.         }
  39.         
  40.         /* 签字板横屏处理*/
  41.         @media all and (orientation : portrait) {
  42.             .layui-m-layermain {
  43.                 transform: rotate(90deg) !important;
  44.             }
  45.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="container" id="container"></div>
  51.     <script type="text/html" id="temp">
  52.        <span class="save-canvas-to-img">
  53.            确认签名
  54.        </span>
  55.     </script>
  56.     <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
  57.     <script src="your-path/layer.js"></script>
  58.     <script src="your-path/Tablet-1.0.js"></script>
  59.     <script>
  60.         let tablet;
  61.         $(function (){
  62.             tablet = new Tablet("#container",{
  63.                 defaultColor: "#000", //笔的默认颜色
  64.                 otherHtml: $("#temp").html(), //外部功能小部件
  65.                 response: true, //开启响应式
  66.                 onInit: function (){
  67.                     let that = this,
  68.                     container = this.container;  
  69.                     container.find(".save-canvas-to-img").on("click", function (){
  70.                     
  71.                     /* 直接获取 base64 编码的图片*/
  72.                     let signImg = that.getBase64()
  73.                     
  74.                     console.log(signImg)
  75.                     
  76.                     layer.open({
  77.                         content: '确定提交自己的个人签名么？'
  78.                         ,btn: ['确定', '取消']
  79.                         ,yes: function(index){
  80.                             layer.close(index)
  81.                             $.ajax({
  82.                                 url: "your-url",
  83.                                 method: 'post',
  84.                                 data: {
  85.                                     signImg: signImg
  86.                                 },
  87.                                 success: function(data) {
  88.                                     /* 这里返回数据根据你的实际情况处理*/
  89.                                     let status = data.result.status
  90.                                     let result = data.result.result
  91.                                     if (status === 200) {
  92.                                         layer.open({
  93.                                             time: 1,
  94.                                             title: [
  95.                                                 '提示信息',
  96.                                                 'background-color: green; color:#fff;'
  97.                                             ]
  98.                                             ,content: result.toString()
  99.                                         });
  100.                                     } else {
  101.                                         layer.open({
  102.                                             time: 1,
  103.                                             title: [
  104.                                                 '提示信息',
  105.                                                 'background-color: #FF4351; color:#fff;'
  106.                                             ]
  107.                                             ,content: result.toString()
  108.                                         });
  109.                                     }
  110.                                 },
  111.                                 error: function (error) {}
  112.                             })
  113.                                 that.clear()
  114.                             },no: function (index) {
  115.                                 layer.close(index)
  116.                                 that.clear()
  117.                             }
  118.                         })
  119.                     })
  120.                 }
  121.             });
  122.             
  123.             /* 横屏处理，这里简单粗暴，如果屏幕转动，直接重载页面。*/
  124.             var evt = "onorientationchange" in window ? "orientationchange" : "resize";
  125.             window.addEventListener(evt,resize,false);
  126.             window.orientation = 90;
  127.             var oldOrientation = window.orientation;
  129.             function resize(fals) {
  130.                 if(window.orientation !== oldOrientation) {
  131.                     window.document.location.reload()
  132.                     oldOrientation = window.orientation
  133.                 }
  134.                 if (window.orientation === 0 || window.orientation === 180) {
  135.                     tablet.rotate(90);
  136.                 }
  137.             }
  138.             resize(true);
  139.         });
  140.     </script>
  141. </body>
  142. </html>
  1. /* 处理 ajax 传来的 base64编码*/
  2. function userSignData($signImg)
  3. {
  4.     $dest = 'your-path/signImg'.uniqid().'.png';
  5.     
  6.     $base64 = explode(',', $signImg);
  7.     
  8.     /* 这里默认当成 png 处理了，处女座请自己完善*/
  9.     $pngCode = base64_decode(end($base64));
  11.     file_put_contents($dest, $pngCode);
  13.     $res = compressImg($dest, $dest, 0.5);
  14.     if ($res) {
  15.         /* 这里就是压缩后的图片编码*/
  16.         $base64NewImg = base64_encode(file_get_contents($dest));
  18.         /* 删除保存的图片，当然你可以不删除，注释以下即可*/
  19.         unlink($dest);
  20.         
  21.         return ['status' => 200, 'result' => '已提交签名'];
  22.     } else {
  23.         return ['status' => 500, 'result' => '巴拉巴拉巴拉'];
  24.     }
  25.     
  26. }
  28. /* 压缩图片*/
  29. function compressImg($source, $dest, $quality = 0.7)
  30. {
  31.     // 判断原图是否存在
  32.     if(!file_exists($source)){
  33.         return false;
  34.     }
  35.         
  36.     // 获取原图信息
  37.     list($owidth, $oheight, $otype) = getimagesize($source);
  39.     $newWidth = $owidth * $quality;
  40.     $newHeight = $oheight * $quality;
  42.     /* 由于签名是透明背景的 png，这里创建一个透明背景的新图*/
  43.     $newImg = imagecreatetruecolor($newWidth, $newHeight);
  44.     $color=imagecolorallocate($newImg,255,255,255);
  45.     imagecolortransparent($newImg,$color);
  46.     imagefill($newImg,0,0,$color);
  47.     
  48.     
  49.     switch($otype){
  50.         case 1: $source_img = imagecreatefromgif($source); break;
  51.         case 2: $source_img = imagecreatefromjpeg($source); break;
  52.         case 3: $source_img = imagecreatefrompng($source); break;
  53.         default:
  54.             return false;
  55.     }
  57.     imagecopyresampled($newImg, $source_img, 0, 0, 0, 0, $newWidth, $newHeight, $owidth, $oheight);
  59.     // 生成图片
  60.     switch($otype){
  61.         case 1: imagegif($newImg, $dest); break;
  62.         case 2: imagejpeg($newImg, $dest); break;
  63.         case 3: imagepng($newImg, $dest); break;
  64.     }
  66.     imagedestroy($source_img);
  67.     imagedestroy($newImg);
  68.     
  69.     return is_file($dest)? true : false;
  70. }

版权声明：本文为my3306原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/my3306/p/9895920.html