jSignature 横屏手写签名

程序媛刘刘

已于 2024-06-07 13:28:32 修改

阅读量302

点赞数

分类专栏：开发记录文章标签： jSignature 前端手写签

于 2023-11-09 17:06:12 首次发布

本文链接：https://blog.csdn.net/weixin_53105591/article/details/134316001

版权

开发记录专栏收录该内容

43 篇文章 1 订阅

订阅专栏

开发需求：移动端竖屏手写板太小了，想做一个横屏的手写板

开发问题：横屏手写板书写的base64导出的图片是竖直的，我这里想变成横版显示，就修改了下生成的base64

方案一：

unbolt it : jSignature - jQuery plugin for web signatures

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    /* #myCanvas{
        transform:rotate(90deg);
    } */
  </style>
  <!--[if lt IE 9]>
    <script type="text/javascript" src="./js/flashcanvas.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
  <script src="./js/jquery.min.js" type="text/javascript"></script>
  <script src="./js/jSignature.min.js"></script>
</head>

<body>
  <div class="layui-col-xs12" style="height: 100%;padding: 5px;">

    <div class="layui-col-xs1">
      <img src="./images/save.png" onclick="save();" />
      <img src="./images/reset.png" onclick="reset()" />
      <img src="./images/rotate0.png" width="24" height="24" style="margin: 5px;" onclick="Rotate(false);" />
    </div>
    <div class="layui-col-xs11" style="text-align: center;">
      <!-- <canvas id="myCanvas" width="300" height="600"
        style="background-color: #fff; border: 1px solid #ccc; border-radius: 7px;"></canvas> -->
      <div id="myCanvas" style="background-color: #fff; border: 1px solid #ccc; border-radius: 7px;"></div>
      <!-- <canvas id="myCanvas0" width="600" height="300" style="display: none;"></canvas> -->
    </div>

  </div>

</body>
<script src="./js/jSignature.min.js"></script>
<script>



  var width = window.innerWidth - window.innerWidth * 0.1;
  var height = window.innerHeight - window.innerHeight * 0.1
  function save() {
    var data = $("#myCanvas").jSignature("getData")
      console.log(data);
      var image = new Image();
      image.src = data;
      image.onload = function () {
        var roateStream = roate(image);
        var image2 = new Image();
        image2.src = roateStream;
        image2.onload = function () {
          console.log(image2.src);
          var src =image2.src;
        }
      };
  }

  function reset() {
    $("#myCanvas").jSignature("reset")
  }




  $(document).ready(function () {
    console.log(window.innerWidth,);
    console.log(width, height);
    $("#myCanvas").jSignature({ color: "#000", width: width, height: height })
  })



  var roate = function (image) {
    var height = image.height;
    var width = image.width;
    var halfH = height / 2;
    var halfW = width / 2;
    var cvs = document.createElement('canvas');
    cvs.width = height;
    cvs.height = width;
    var ctx = cvs.getContext("2d")
    ctx.translate(halfW, halfH);
    ctx.rotate(-Math.PI / 2);
    ctx.drawImage(image, halfH - width, -halfW);
    return cvs.toDataURL("image/png", 1);
  };


  function Rotate() {
        layer.closeAll();
    }

</script>

</html>