@leafer/web 1.0.0-beta.4 → 1.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/web",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "@leafer/web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,13 +19,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.4",
-    "@leafer/partner": "1.0.0-beta.4",
-    "@leafer/canvas-web": "1.0.0-beta.4",
-    "@leafer/interaction-web": "1.0.0-beta.4",
-    "@leafer/image-web": "1.0.0-beta.4"
+    "@leafer/core": "1.0.0-beta.6",
+    "@leafer/partner": "1.0.0-beta.6",
+    "@leafer/canvas-web": "1.0.0-beta.6",
+    "@leafer/interaction-web": "1.0.0-beta.6",
+    "@leafer/image-web": "1.0.0-beta.6"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.4"
+    "@leafer/interface": "1.0.0-beta.6"
   }
 }

package/src/index.ts

@@ -5,14 +5,17 @@ export * from '@leafer/canvas-web'
 export * from '@leafer/image-web'
 export * from '@leafer/interaction-web'
 
-import { ICreator, IFunction } from '@leafer/interface'
-import { Platform, Creator } from '@leafer/core'
+import { ICreator, IFunction, IExportImageType, IExportFileType, IObject, ICanvasType } from '@leafer/interface'
+import { Platform, Creator, FileHelper } from '@leafer/core'
 
 import { LeaferCanvas } from '@leafer/canvas-web'
 import { LeaferImage } from '@leafer/image-web'
 import { Interaction } from '@leafer/interaction-web'
 
 
+const { mineType, fileType } = FileHelper
+
+
 Object.assign(Creator, {
     canvas: (options?, manager?) => new LeaferCanvas(options, manager),
     image: (options) => new LeaferImage(options),
@@ -21,6 +24,45 @@ Object.assign(Creator, {
     interaction: (target, canvas, selector, options?) => new Interaction(target, canvas, selector, options),
 } as ICreator)
 
+
+export function useCanvas(_canvasType: ICanvasType, _power?: IObject): void {
+    Platform.origin = {
+        createCanvas(width: number, height: number): HTMLCanvasElement {
+            const canvas = document.createElement('canvas')
+            canvas.width = width
+            canvas.height = height
+            return canvas
+        },
+        canvasToDataURL: (canvas: HTMLCanvasElement, type?: IExportImageType, quality?: number) => canvas.toDataURL(mineType(type), quality),
+        canvasToBolb: (canvas: HTMLCanvasElement, type?: IExportFileType, quality?: number) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasSaveAs: (canvas: HTMLCanvasElement, filename: string, quality?: any) => {
+            return new Promise((resolve) => {
+                let el = document.createElement('a')
+                el.href = canvas.toDataURL(mineType(fileType(filename)), quality)
+                el.download = filename
+                document.body.appendChild(el)
+                el.click()
+                document.body.removeChild(el)
+                resolve()
+            })
+        },
+        loadImage(src: any): Promise<HTMLImageElement> {
+            return new Promise((resolve, reject) => {
+                const img = new Image()
+                img.setAttribute('crossOrigin', 'anonymous')
+                img.crossOrigin = 'anonymous'
+                img.onload = () => { resolve(img) }
+                img.onerror = (e) => { reject(e) }
+                if (!src.startsWith('data:')) src.includes("?") ? src + "&xhr" : src + "?xhr" // 需要带上xhr区分image标签的缓存，否则导致浏览器跨域问题
+                img.src = src
+            })
+        }
+    }
+
+    Platform.canvas = Creator.canvas()
+    Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient
+}
+
 Platform.requestRender = function (render: IFunction): void { window.requestAnimationFrame(render) }
 Platform.devicePixelRatio = devicePixelRatio
 
@@ -32,26 +74,3 @@ if (userAgent.indexOf("Firefox") > -1) {
 } else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
     Platform.fullImageShadow = true
 }
-
-Platform.origin = {
-    createCanvas(width: number, height: number): HTMLCanvasElement {
-        const canvas = document.createElement('canvas')
-        canvas.width = width
-        canvas.height = height
-        return canvas
-    },
-    loadImage(src: any): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const img = new Image()
-            img.setAttribute('crossOrigin', 'anonymous')
-            img.crossOrigin = 'anonymous'
-            img.onload = () => { resolve(img) }
-            img.onerror = (e) => { reject(e) }
-            if (!src.startsWith('data:')) src.includes("?") ? src + "&xhr" : src + "?xhr" // 需要带上xhr区分image标签的缓存，否则导致浏览器跨域问题
-            img.src = src
-        })
-    }
-}
-
-Platform.canvas = Creator.canvas()
-Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient