x

public/css/style.css

@@ -8679,9 +8679,11 @@ body.md-skin {
 .edit-box {
   background: #fff;
   border: 1px solid #000;
-  padding: 30px;
+  padding: 43px;
   margin-top: 20px;
   box-sizing: initial;
+  background: url(../img/bc.jpg) no-repeat;
+  background-position: 0px 0px;
 }
 
 .edit-con {

resources/views/web/design.blade.php

@@ -53,7 +53,7 @@
                 </div>
            
             </div> 
-            <div class="fztip">每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴</div>
+            <div class="fztip">每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px,标尺实际像素需要刻度值*10</div>
             <div class="fztip" style="color:red;">双击删除编辑区域内标签工具</div>
             <div class="fztip" ><span style="color:red;">颜色选择器,复制此处颜色可用 </span><input type="text"  id="colorpicker" /></div>
            

resources/views/web/record.blade.php

@@ -53,7 +53,7 @@
 
 <script type="text/html" id="action">
 	<a class="btn btn-xs btn-outline btn-info" href="/web/showPage?tmpl_relation_id=@{{ d.id }}" target="_blank" lay-event="offline">预览</a>
-	<a class="btn btn-xs btn-outline btn-success" href="/web/editLabel?t_id=@{{ d.id }}" target="_blank">下载</a>
+	<a class="btn btn-xs btn-outline btn-success" href="/web/showPage?tmpl_relation_id=@{{ d.id }}" target="_blank">下载</a>
 	{{--@{{# if (d.status == -1) { }}--}}
 	{{--<a class="btn btn-xs btn-outline layui-btn-primary" lay-event="enable">启用</a>--}}
 	{{--@{{# }else{ }}--}}

resources/views/web/showPage.blade.php

 {!!  $html  !!}
+<br/>
+<div style="border-top:1px solid #ccc;margin-top:20px;margin-bottom:20px;"></div>
 
+<a class="downpng layui-btn" target="_blank" href="" download="downImg">下载</a>
 
+<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
-//    alert(567)
+    //创建一个新的canvas
+    var canvas2 = document.createElement("canvas");
+    var _canvas = document.querySelector('.edit-con');
+    var w = parseInt(window.getComputedStyle(_canvas).width);
+    var h = parseInt(window.getComputedStyle(_canvas).height);
+   
+    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
+    canvas2.width = w+Number($(".edit-con").css("borderWidth").split("px")[0])*2;
+    canvas2.height = h+Number($(".edit-con").css("borderWidth").split("px")[0])*2;
+
+    // canvas2.style.width = w + "px";
+    // canvas2.style.height = h + "px";
+    //可以按照自己的需求，对context的参数修改,translate指的是偏移量
+     var context = canvas2.getContext("2d");
+     context.translate(-$(".edit-con").offset().left,-$(".edit-con").offset().top);
+    // var context = canvas2.getContext("2d");
+    // context.scale(2, 2);
+    html2canvas(document.querySelector('.edit-con'), { canvas: canvas2 }).then(function(canvas) {
+        //document.body.appendChild(canvas);
+        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
+        document.querySelector(".downpng").setAttribute('href', canvas.toDataURL());
+    });
 </script>