ocr集成 word模板 签名集成

yinet-admin/src/main/java/com/yinet/web/controller/rlzy/RlzyApplyPrintController.java

@@ -5,6 +5,7 @@ import com.yinet.common.config.Global;
 import com.yinet.common.core.controller.BaseController;
 import com.yinet.common.core.domain.AjaxResult;
 import com.yinet.common.enums.BusinessType;
+import com.yinet.common.utils.Base64ImgUtils;
 import com.yinet.common.utils.DateUtils;
 import com.yinet.common.utils.StringUtils;
 import com.yinet.print.domain.SelfApply;
@@ -69,7 +70,6 @@ public class RlzyApplyPrintController extends BaseController {
         if(StringUtils.isEmpty(rlzyApply.getBusinessScope())){
             return AjaxResult.error("请选择申请业务范围");
         }
-
         Date nowTime = DateUtils.getNowDate();
         Date later5 = DateUtils.later5();
         rlzyApply.setCreateTime(nowTime);

yinet-admin/src/main/resources/static/rlzy/js/esign.js

@@ -0,0 +1,205 @@
+/*
+ * 利用Canvas实现简单的签字功能
+ *
+ * 在引入该JS后需要进行初始化动作
+ * $().esign(canvasEdit, sign_show, sign_clear, sign_ok);
+ * 其中四个参数均为需要的DOM的ID，允许传入null或""等，视为启用默认ID
+ *
+ * 需要的HTML包括：
+ * 1.一个确定了大小的canvas区域，ID需要通过参数传入jQuery插件，如果不传则默认视canvasEdit为id
+ * 2.一个用于显示签名结果的div去，id不传默认视为sign_show
+ * 3.一个清除按钮，点击清空当前画板，id如若不传则视为sign_clear
+ * 4.一个完成按钮，点击生成签名图片并显示在指定区域，id不传视为sign_ok
+ *
+ * tip:鼠标只要出了画图范围就视为松开鼠标
+ * */
+
+(function (root, doc, factory) {
+    //根据加载方式不同，载入jQuery（根据你的requie命名自定义修改）
+    if (typeof define === "function" && define.amd) {
+        define( ["jquery"], function ($) {
+            return factory($);
+        });
+    } else {
+        factory(root.jQuery);
+    }
+}(this, document, function($) {
+    $.fn.esign = function(canvasEdit, sign_show, sign_clear, sign_ok) {
+
+        //初始化相关DOM，获得结果寄存命名空间
+        var domMap = domInit(canvasEdit, sign_show, sign_clear, sign_ok);
+        //获取画板引用
+        var canvas = domMap.canvasEdit[0];
+        //注册相关事件
+        if (typeof document.ontouchstart != "undefined") {      //适配移动设备
+            canvas.addEventListener('touchmove', onMouseMove, false);
+            canvas.addEventListener('touchstart', onMouseDown, false);
+            canvas.addEventListener('touchend', onMouseUp, false);
+        } else {      //适配电脑
+            canvas.addEventListener('mousemove', onMouseMove, false);
+            canvas.addEventListener('mousedown', onMouseDown, false);
+            canvas.addEventListener('mouseup', onMouseUp, false);
+            canvas.addEventListener('mouseleave', onMouseUp, false);
+        }
+        //初始化上下文和参数
+        var context = canvas.getContext('2d');
+        var linex = new Array();
+        var liney = new Array();
+        var linen = new Array();
+        var lastX = 1;
+        var lastY = 30;
+        var flag = 0;
+
+        //注册按钮相关事件
+        domMap.sign_ok.on("click",function(){
+            preview();
+            rewrite();
+        });
+
+        domMap.sign_clear.click(function(){
+            clearImg();
+            rewrite();
+        });
+
+        /*
+        *方法声明
+        */
+
+        //相关DOM初始化动作，如果不传入则使用查找默认ID
+        function domInit(canvasEdit, sign_show, sign_clear, sign_ok){
+            var domMap = {};
+
+            if(!canvasEdit){
+                domMap.canvasEdit = $("#canvasEdit");
+            } else{
+                domMap.canvasEdit = $("#" + canvasEdit);
+            }
+
+            if(!sign_show){
+                domMap.sign_show = $("#sign_show");
+            } else{
+                domMap.sign_show = $("#" + sign_show);
+            }
+
+            if(!sign_clear){
+                domMap.sign_clear = $("#sign_clear");
+            } else{
+                domMap.sign_clear = $("#" + sign_clear);
+            }
+
+            if(!sign_ok){
+                domMap.sign_ok = $("#sign_ok");
+            } else{
+                domMap.sign_ok = $("#" + sign_ok);
+            }
+
+            return domMap;
+        }
+
+        //根据鼠标坐标获取绘图坐标
+        function getCanvasPos(canvas, evt) {
+            var rect = canvas.getBoundingClientRect();
+            var x, y;
+            if (evt.targetTouches) {
+                x = evt.targetTouches[0].clientX;
+                y = evt.targetTouches[0].clientY;
+            } else {
+                x = evt.clientX;
+                y = evt.clientY;
+            }
+            return {
+                x: (x - rect.left) * (canvas.width / rect.width),
+                y: (y - rect.top) * (canvas.height / rect.height)
+            }
+        }
+
+        //鼠标移动的时候
+        function onMouseMove(evt)
+        {
+            var x = getCanvasPos(canvas, evt).x,
+                y = getCanvasPos(canvas, evt).y;
+
+            //判断是否处于按下状态
+            if (flag == 1) {
+                //如果是则画图
+                linex.push(x);
+                liney.push(y);
+                linen.push(1);
+                context.save();
+                context.translate(context.canvas.width / 2, context.canvas.height / 2);
+                context.translate(-context.canvas.width / 2 , -context.canvas.height/2);
+                context.beginPath();
+                context.lineWidth = 2;
+                for (var i = 1; i < linex.length; i++) {
+                    lastX = linex[i];
+                    lastY = liney[i];
+                    if (linen[i] == 0)
+                        context.moveTo(lastX, lastY);
+                    else
+                        context.lineTo(lastX, lastY);
+                }
+                context.shadowBlur = 10;
+                context.stroke();
+                context.restore();
+            }
+            evt.preventDefault();
+        }
+
+        //当鼠标按下的时候修改按下标志，并开始记录坐标
+        function onMouseDown(evt) {
+            var x = getCanvasPos(canvas, evt).x,
+                y = getCanvasPos(canvas, evt).y;
+            flag = 1;
+            linex.push(x);
+            liney.push(y);
+            linen.push(0);
+        }
+
+        //鼠标松开清除标志
+        function onMouseUp() {
+            flag = 0;
+        }
+
+        //清空绘制区域
+        function rewrite(){
+            linex = new Array();
+            liney = new Array();
+            linen = new Array();
+            context.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        //清理已生成照片
+        function clearImg(){
+            domMap.sign_show[0].innerHTML = "";
+        }
+
+        //填充生成的图片
+        function preview(){
+            var r=confirm("是否提交");
+            if (r==true)
+            {
+                var show = domMap.sign_show[0];
+                show.innerHTML = "";
+                var base64Img= convertCanvasToImage(canvas)
+                show.appendChild(base64Img);
+                $("#qianming").val(base64Img.src)
+                submitinfo()
+            }
+            else
+            {
+                return ;
+            }
+
+        }
+
+        //生成签字图片，图片大小自行修改
+        function convertCanvasToImage(canvas){
+            var image = new Image();
+            image.width = 80;
+            image.height = 50;
+            image.src = canvas.toDataURL("i/png");
+            return image;
+        }
+    };
+    return $.fn.esign;
+}));

yinet-admin/src/main/resources/templates/rlzy/print/apply.html

@@ -40,7 +40,11 @@
         .selTr {
             background-color: #a0e0ff;
         }
-
+        .content3{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
     </style>
     <script>
         function checkLeave() {
@@ -140,6 +144,7 @@
         </div>
         <div class="content" id="content1" style="display:none;">
             <form style="width: 100%" id="form-file-add">
+                <input name="qianming" id="qianming" type="hidden">
                 <div class="row">
                     <div
                             class="col-md-2 col-lg-2 col-sm-12 text-right align-self-md-center col-xl-2 tr"
@@ -476,9 +481,10 @@
                         <button class="btn btn-success btn-lg" type="button" onclick="toSaomiao()">
                             上 一 步
                         </button>
-                        <button style="margin-left: 30px;" class="btn btn-lg btn-warning" type="button" onclick="submitinfo()">
-                            提交
+                        <button class="btn btn-success btn-lg" type="button" onclick="toQianming()">
+                            下 一 步
                         </button>
+
                         <button
                                 style="margin-left: 30px;"
                                 class="btn btn-primary btn-outline-primary ml-sm-2 btn-lg"
@@ -501,7 +507,32 @@
 
             </form>
         </div>
+        <div class="content3" id="content3" style="display:none;" >
+            <div class="canvasDiv" >
+                <a style="    font-size: 25px; font-weight: bolder;">请在下方进行签名</a>
+                <div id="editing_area" style="background-color: #fff;width: 800px;height:350px">
+                    <canvas width="800" height="350" id="canvasEdit"></canvas>
+                </div>
+            </div>
 
+            <div class="imgDiv" style="display: none">
+                <span id="sign_show"></span>
+            </div>
+
+            <div class="btnDiv">
+                <button   class="btn btn-lg btn-success" type="button" onclick="goInfo()" >
+                    上一步
+                </button>
+                <button   id="sign_ok"  class="btn btn-lg btn-info" >提交
+                </button>
+                <button id="sign_clear"  style="margin-left: 30px;" class="btn btn-lg btn-warning"
+                >清除
+                </button>
+
+
+            </div>
+
+        </div>
 
 
 
@@ -514,9 +545,15 @@
 <script src="/print/js/cookie.tool.js" type="text/javascript" charset="utf-8"></script>
 <script src="/raio/newjs/qwebchannel.js" type="text/javascript" charset="utf-8"></script>
 <script src="/raio/newjs/app.js" type="text/javascript" charset="utf-8"></script>
+<script src="/rlzy/js/esign.js" type="text/javascript" charset="utf-8"></script>
 
 <script th:inline="javascript">
 
+
+    $(function(){
+        //初始化动作，根据DOM的ID不同进行自定义，如果不写则内部默认取这四个
+        $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
+    });
     $(function () {
         $("#idcard").val(getCookie("cardno"))
         $("#legalName").val(getCookie("cardname"))
@@ -543,6 +580,14 @@
         }
     });
 
+    function toQianming() {
+        $("#content1").hide()
+        $("#content3").show()
+    }
+    function goInfo() {
+        $("#content3").hide()
+        $("#content1").show()
+    }
     function toSaomiao() {
             $("#content1").hide()
             $("#content2").show()
@@ -564,7 +609,7 @@
         $.ajax({
             url: prefix+"/getOcrJson",
             type:"post",
-            data: {"fileBase64":$("#baseFile").val()},
+            data: {"fileBase64":"/profile/upload/aaaa.jpg"},
             beforeSend:function(){
                 cl_closeidA4photos();
                 $.modal.loading("智能识别中，请稍等...")
@@ -598,23 +643,39 @@
 
     function submitinfo() {
         if ($.validate.form()) {
-
-            var creditCode = $('#creditCode').val()
-            console.log(creditCode)
+            var qmData=""
+            qmData= getFileFromBase64($("#qianming").val().replace("data:image/jpeg;base64,",""), "qm.jpg");
             $.ajax({
-                url: prefix + "/add",
-                method: 'post',
-                data: $('#form-file-add').serialize(),
-                success: function (res) {
-                    if(res.code=="0"){
-                        cl_closeidA4photos();
-                        alert("提交成功")
-                        window.location.href = "/zhuxiao/index"
-                    }else {
-                        alert(res.msg)
-                    }
+                type: "post",
+                url: ctx + "common/upload",
+                data: qmData,
+                cache: false,
+                contentType: false,
+                processData: false,
+                dataType: 'json',
+                success: function (result) {
+                    $('#qianming').val(result.fileName)
+
+
+                    var creditCode = $('#creditCode').val()
+                    console.log(creditCode)
+                    $.ajax({
+                        url: prefix + "/add",
+                        method: 'post',
+                        data: $('#form-file-add').serialize(),
+                        success: function (res) {
+                            if(res.code=="0"){
+                                cl_closeidA4photos();
+                                alert("提交成功")
+                                window.location.href = "/zhuxiao/index"
+                            }else {
+                                alert(res.msg)
+                            }
+                        }
+                    })
                 }
-            })
+            });
+
         }
     }
 
@@ -900,6 +961,10 @@
         $("#" + nowfile).append(imghtml);
 
     }
+
+
+
+
 </script>
 </body>
 </html>

yinet-system/src/main/java/com/yinet/rlzy/domain/RlzyApply.java

@@ -174,4 +174,10 @@ public class RlzyApply extends BaseEntity {
     @Excel(name = "备注")
     @Column(name = "remark")
     private String remark;
+    /**
+     * 签名
+     */
+    @Excel(name = "签名")
+    @Column(name = "qianming")
+    private String qianming;
 }

yinet-system/src/main/resources/mapper/rlzy/RlzyApplyMapper.xml

@@ -33,6 +33,7 @@
         <result property="createBy" column="create_by"/>
         <result property="createTime" column="create_time"/>
         <result property="remark" column="remark"/>
+        <result property="qianming" column="qianming"/>
     </resultMap>
 
     <sql id="selectRlzyApplyVo">
@@ -62,6 +63,7 @@
                status,
                create_by,
                create_time,
+               qianming,
                remark
         from rlzy_apply
     </sql>
@@ -140,6 +142,9 @@
             <if test="chengnuoshu != null and chengnuoshu != ''">
                 and chengnuoshu = #{chengnuoshu}
             </if>
+            <if test="qianming != null and qianming != ''">
+                and qianming = #{qianming}
+            </if>
             /*and  status = 1*/
         </where>
     </select>