feat: add toDataURL to idraw

packages/idraw/examples/features/index.html

@@ -20,6 +20,9 @@
             <div class="elem-menu-btn" id="elem-redo">
               Redo
             </div>
+            <div class="elem-menu-btn" id="btn-download">
+              Download
+            </div>
           </div>
         </div>
       </div>

packages/idraw/examples/test/api.html

@@ -15,13 +15,13 @@
         background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
       }
       .list {
-        width: 910px;
+        width: 920px;
         overflow: hidden;
         border-top: 1px solid #f0f0f0;
         border-left: 1px solid #f0f0f0;
       }
       .box {
-        width: 300;
+        width: 302;
         min-height: 220;
         float: left;
         border-right: 1px solid #f0f0f0;
@@ -52,6 +52,15 @@
       <div class="box" id="mount-3">
         <div class="title">exportDataURL('image/jpeg')</div>
       </div>
+      <div class="box" id="mount-4">
+        <div class="title">toDataURL('image/png')</div>
+      </div>
+      <div class="box" id="mount-5">
+        <div class="title">toDataURL('image/jpeg')</div>
+      </div>
+      <div class="box" id="mount-6">
+        
+      </div>
     </div>
 
     <script src="./../../dist/index.global.js"></script>
@@ -157,11 +166,28 @@
           imgJPG.src = jpgSrc;
           imgJPG.width = mount3.getBoundingClientRect().width;
           mount3.appendChild(imgJPG);
+
+          setTimeout(() => {
+            const pngSrc = idraw.toDataURL('image/png');
+            const mount4 = document.querySelector('#mount-4');
+            const imgPNG = new window.Image();
+            imgPNG.src = pngSrc;
+            imgPNG.width = mount4.getBoundingClientRect().width;
+            mount4.appendChild(imgPNG);
+
+            const jpgSrc = idraw.toDataURL('image/jpeg');
+            const mount5 = document.querySelector('#mount-5');
+            const imgJPG = new window.Image();
+            imgJPG.src = jpgSrc;
+            imgJPG.width = mount5.getBoundingClientRect().width;
+            mount5.appendChild(imgJPG);
+          }, 200);
         }, 100);
       })();
     </script>
 
-  
+   
+
   
   </body>
 </html>

packages/idraw/src/index.ts

@@ -9,7 +9,7 @@ import {
   _createOpts, _pushRecord, _keyboardWatcher,
 } from './names';
 import { redo, undo } from './mixins/record';
-import { exportDataURL } from './mixins/file';
+import { exportDataURL, toDataURL } from './mixins/file';
 import { copyElements, pasteElements, cutElements, deleteElements,
   keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight, keyUndo,
 } from './mixins/keyboard';
@@ -45,6 +45,10 @@ class iDraw extends Core {
     return redo(this);
   }
 
+  toDataURL(type: 'image/png' | 'image/jpeg', quality?: number): string {
+    return toDataURL(this, type, quality);
+  }
+
   async exportDataURL(type: 'image/png' | 'image/jpeg', quality?: number ): Promise<string> {
     return exportDataURL(this, type, quality);
   }

packages/idraw/src/mixins/file.ts

@@ -28,7 +28,17 @@ export async function exportDataURL(
       reject(err);
     }
   });
+}
 
-  
 
+
+export function toDataURL(
+  idraw: iDraw,
+  type: 'image/png' | 'image/jpeg',
+  quality?: number
+): string {
+  const ctx = idraw.__getOriginContext2D();
+  const canvas = ctx.canvas;
+  const dataURL: string = canvas.toDataURL(type, quality);
+  return dataURL;
 }

scripts/screen.config.js

@@ -6,7 +6,7 @@ const pageList = [
   { path: 'core/examples/test/elements.html', w: 930, h: 810, delay: 800 },
   { path: 'core/examples/test/api.html', w: 930, h: 1570, delay: 800 },
   { path: 'core/examples/test/resource.html', w: 930, h: 540, delay: 800 },
-  { path: 'idraw/examples/test/api.html', w: 930, h: 270, delay: 800 },
+  { path: 'idraw/examples/test/api.html', w: 930, h: 540, delay: 800 },
 ]
 
 module.exports = {