图片叠加

src/main/java/im/zhaojun/system/model/TraffpictureParam.java

@@ -18,7 +18,6 @@ public class TraffpictureParam extends Traffpicture {
 
     private static final long serialVersionUID=1L;
 
-
     private Long recordid;
     private String fdid;
     private  Integer  channelid;

src/main/resources/static/js/sjcx/sjcx.js

@@ -207,6 +207,28 @@ let vue_sjcx = new Vue({
                         let a_sum = result.count;
                         vue_sjcx.count = result.count;
                         vue_sjcx.data_table_wfpz = result.data;
+
+                        for(let  i=0;i<result.data.length;i++){
+
+                               var canvas = document.getElementById("cvs"+result.data[i].id);
+                               if(null==canvas) continue;
+                                    //canvas.width=canvas.clientWidth;
+                                    //canvas.height=canvas.clientHeight;
+//                            let img=document.getElementById("img"+result.data[i].id)
+
+//                            img.onload = function(){
+                             var ctx = canvas.getContext("2d");
+                             ctx.strokeStyle = "#0000ff";
+                             //ctx.setLineDash([5, 10]);
+                            // ctx.lineWidth = 2;
+//                             canvas.width = img.offsetWidth;
+//                            canvas.height = img.offsetHeight;
+                            // 这一段如果不等img加载完成会无法绘制出图片
+                            //ctx.drawImage(img, 0, 0, canvas.clientWidth, canvas.clientHeight);
+                            ctx.strokeRect(50, 50, 100, 100);
+//                        }
+                     }
+
                         if (items) {
                             $("#fy4").bootstrapPaginator({
                                 bootstrapMajorVersion: 3, //版本，这里设置为3，大于2即可
@@ -232,6 +254,7 @@ let vue_sjcx = new Vue({
                                 }
                             });
                         }
+
                     }
                 }
             });
@@ -350,6 +373,9 @@ let vue_sjcx = new Vue({
             }
         });
         this.xzml();
+        //遍历div 将 img 与canvas整合
+
+
     },
 
 });

src/main/resources/templates/page/sjcx.html

@@ -80,8 +80,9 @@
                                         <input type="checkbox" name="loginName" class="loginName" :value="item.id+'|'+item.channelid+'|'+item.fdid+'|'+item.recordtime+'|'+item.recordtype"   @click="cli_input" style="width: 17px;height: 17px;margin-top: 0px;">
                                     </div>
                                     <div class="show-icon" :style="{'background':(item.processstatus==0||item.processstatus==null)?'#ff9c2b':(item.processstatus==2)?'#fc3939':(item.processstatus==1)?'#2fba08':'#cccccc'}" v-text="item.processstatus==0||item.processstatus==null?'未处理':item.processstatus==1?'正检':item.processstatus==2?'误检':'重复事件'"></div>
-                                    <div class="li-top">
-                                        <img :src="'data:image/png;base64,'+item.imagedata">
+                                    <div class="li-top" style=" position: relative;">
+                                        <!--<img :src="'data:image/png;base64,'+item.imagedata" :id="'img'+item.id">-->
+                                        <canvas :id="'cvs'+item.id" style="position: absolute;pointer-events: none;left:0;width:100%;height:100%"></canvas>
                                     </div>
                                     <div class="li-center">
                                         <div>
@@ -244,5 +245,6 @@
 <script src="../js/laydate/laydate.js"></script>
 <script src="../js/vue.js"></script>
 <script src="../js/util/http_util.js"></script>
+<script src="../js/jkgl/Canvas.js"></script>
 <script src="../js/sjcx/sjcx.js"></script>
 </html>
\ No newline at end of file