Browse Source

canvas实现图片存储,网页上显示

webturing 4 years ago
parent
commit
dfb029319c
1 changed files with 13 additions and 0 deletions
  1. 13 0
      database/paint.html

+ 13 - 0
database/paint.html

@@ -3,11 +3,15 @@
     <meta charset=utf-8>
     <title>HTML5</title>
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
+    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
+    <script src="canvas2image.js"></script>
     <style type="text/css">
         #xu {
             border: 1px solid #ccc;
         }
     </style>
+    <button onclick="savePic()">save</button>
+    <img src="" id='screen' alt="will show here">
 </head>
 <body>
 <canvas id="xu" width="500" height="400"></canvas>
@@ -44,6 +48,15 @@
         }
     })
     ;
+
+
+    function savePic() {
+        var image=new Image();
+        image.src= document.getElementById("xu").toDataURL("image/png");
+        document.getElementById('screen').src=image.src;
+    }
+
+
 </script>
 
 </body>