x

resources/views/web/showPage.blade.php

@@ -2,30 +2,19 @@
 <br/>
 <br/>
 <div style="border-top:1px solid #ccc;margin-top:20px;margin-bottom:20px;"></div>
 <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>
+<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 src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
 <script>
-    //创建一个新的canvas
     var canvas2 = document.createElement("canvas");
     var canvas2 = document.createElement("canvas");
     var _canvas = document.querySelector('.edit-con');
     var _canvas = document.querySelector('.edit-con');
     var w = parseInt(window.getComputedStyle(_canvas).width);
     var w = parseInt(window.getComputedStyle(_canvas).width);
     var h = parseInt(window.getComputedStyle(_canvas).height);
     var h = parseInt(window.getComputedStyle(_canvas).height);
-   
-    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
     canvas2.width = w+Number($(".edit-con").css("borderWidth").split("px")[0])*2;
     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.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");
      var context = canvas2.getContext("2d");
      context.translate(-$(".edit-con").offset().left,-$(".edit-con").offset().top);
      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) {
     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());
         document.querySelector(".downpng").setAttribute('href', canvas.toDataURL());
     });
     });
 </script>
 </script>