feat: canvas、createCanvasContext、canvasGetImageData、canvasPutImageData、canvasToTempFilePath

package.json

@@ -49,6 +49,7 @@
     "@types/fs-extra": "^9.0.6",
     "@types/jest": "^26.0.19",
     "@types/node": "^14.14.20",
+    "@types/pako": "^1.0.1",
     "@types/puppeteer": "^5.4.2",
     "@types/quill": "^1.3.7",
     "@typescript-eslint/parser": "^4.12.0",
@@ -61,6 +62,7 @@
     "mini-types": "^0.1.4",
     "miniprogram-api-typings": "^3.2.0",
     "module-alias": "^2.2.2",
+    "pako": "^2.0.3",
     "prettier": "^2.2.1",
     "rollup": "^2.35.1",
     "rollup-plugin-jscc": "^2.0.0",

packages/uni-api/src/index.ts

@@ -4,6 +4,7 @@ export * from './service/base/interceptor'
 
 export * from './service/context/createVideoContext'
 export * from './service/context/createMapContext'
+export * from './service/context/canvas'
 
 export * from './service/ui/createIntersectionObserver'
 export * from './service/ui/createSelectorQuery'
@@ -13,6 +14,7 @@ export * from './service/ui/tabBar'
 export * from './protocols/base/canIUse'
 
 export * from './protocols/context/context'
+export * from './protocols/context/canvas'
 
 export * from './protocols/device/makePhoneCall'
 export * from './protocols/device/setClipboardData'

packages/uni-api/src/protocols/context/canvas.ts

@@ -12,6 +12,8 @@ function getInt(name: string, defaultValue?: number) {
 
 const formatWidth = getInt('width')
 const formatHeight = getInt('height')
+
+//#region getImageDataOptions
 export const API_CANVAS_GET_IMAGE_DATA = 'canvasGetImageData'
 export type API_TYPE_CANVAS_GET_IMAGE_DATA = typeof uni.canvasGetImageData
 export const CanvasGetImageDataOptions: ApiOptions<API_TYPE_CANVAS_GET_IMAGE_DATA> = {
@@ -22,7 +24,6 @@ export const CanvasGetImageDataOptions: ApiOptions<API_TYPE_CANVAS_GET_IMAGE_DAT
     height: formatHeight,
   },
 }
-
 export const CanvasGetImageDataProtocol: ApiProtocol<API_TYPE_CANVAS_GET_IMAGE_DATA> = {
   canvasId: {
     type: String,
@@ -45,11 +46,12 @@ export const CanvasGetImageDataProtocol: ApiProtocol<API_TYPE_CANVAS_GET_IMAGE_D
     required: true,
   },
 }
+//#endregion
+
+//#region putImageData
 export const API_CANVAS_PUT_IMAGE_DATA = 'canvasPutImageData'
 export type API_TYPE_CANVAS_PUT_IMAGE_DATA = typeof uni.canvasPutImageData
-
 export const CanvasPutImageDataOptions = CanvasGetImageDataOptions
-
 export const CanvasPutImageDataProtocol: ApiProtocol<API_TYPE_CANVAS_PUT_IMAGE_DATA> = /*#__PURE__*/ extend(
   {
     data: {
@@ -59,7 +61,9 @@ export const CanvasPutImageDataProtocol: ApiProtocol<API_TYPE_CANVAS_PUT_IMAGE_D
   },
   CanvasGetImageDataProtocol
 )
+//#endregion
 
+//#region toTempFilePath
 const fileTypes = {
   PNG: 'png',
   JPG: 'jpg',
@@ -67,7 +71,6 @@ const fileTypes = {
 }
 export const API_CANVAS_TO_TEMP_FILE_PATH = 'canvasToTempFilePath'
 export type API_TYPE_CANVAS_TO_TEMP_FILE_PATH = typeof uni.canvasToTempFilePath
-
 export const CanvasToTempFilePathOptions: ApiOptions<API_TYPE_CANVAS_TO_TEMP_FILE_PATH> = {
   formatArgs: {
     x: getInt('x', 0),
@@ -89,7 +92,6 @@ export const CanvasToTempFilePathOptions: ApiOptions<API_TYPE_CANVAS_TO_TEMP_FIL
     },
   },
 }
-
 export const CanvasToTempFilePathProtocol: ApiProtocol<API_TYPE_CANVAS_TO_TEMP_FILE_PATH> = {
   x: Number,
   y: Number,
@@ -104,6 +106,7 @@ export const CanvasToTempFilePathProtocol: ApiProtocol<API_TYPE_CANVAS_TO_TEMP_F
   fileType: String,
   quality: Number,
 }
+//#endregion
 
 export const DrawCanvasProtocol: ApiProtocol<any> = {
   canvasId: {

packages/uni-components/src/helpers/useEvent.ts

 import { Ref, SetupContext, EmitsOptions } from 'vue'
 import { normalizeTarget } from '@dcloudio/uni-shared'
+import { createNativeEvent } from '@dcloudio/uni-core'
 
 type EventDetail = Record<string, any>
 export type CustomEventTrigger = ReturnType<typeof useCustomEvent>
+export type NativeEventTrigger = ReturnType<typeof useNativeEvent>
 export type EmitEvent<E extends (...args: any) => any> = [Parameters<E>[0]]
 
 export function withWebEvent(fn: Function) {
@@ -21,6 +23,14 @@ export function useCustomEvent<E extends EmitsOptions>(
   }
 }
 
+export function useNativeEvent<E extends EmitsOptions>(
+  emit: SetupContext<E>['emit']
+) {
+  return (name: string, evt: Event) => {
+    emit(name, createNativeEvent(evt))
+  }
+}
+
 function normalizeCustomEvent(
   name: string,
   domEvt: Event,

packages/uni-components/src/index.ts

 export * from './components'
 export { useOn, useSubscribe } from './helpers/useSubscribe'
-export { withWebEvent, useCustomEvent } from './helpers/useEvent'
-export type { CustomEventTrigger, EmitEvent } from './helpers/useEvent'
+export {
+  withWebEvent,
+  useCustomEvent,
+  useNativeEvent,
+} from './helpers/useEvent'
+export type {
+  CustomEventTrigger,
+  NativeEventTrigger,
+  EmitEvent,
+} from './helpers/useEvent'
 export { useUserAction } from './helpers/useUserAction'
 export { useAttrs } from './helpers/useAttrs'

packages/uni-components/style/canvas.css

@@ -5,7 +5,7 @@ uni-canvas {
   position: relative;
 }
 
-uni-canvas > canvas {
+uni-canvas > .uni-canvas-canvas {
   position: absolute;
   top: 0;
   left: 0;

packages/uni-core/src/helpers/callbacks.ts

+const callbacks = {}
+
+export function createCallbacks(namespace: string) {
+  let scopedCallbacks = (callbacks as any)[namespace]
+  if (!scopedCallbacks) {
+    scopedCallbacks = {
+      id: 1,
+      callbacks: Object.create(null),
+    }
+    ;(callbacks as any)[namespace] = scopedCallbacks
+  }
+  return {
+    get(id: any) {
+      return scopedCallbacks.callbacks[id]
+    },
+    pop(id: any) {
+      const callback = scopedCallbacks.callbacks[id]
+      if (callback) {
+        delete scopedCallbacks.callbacks[id]
+      }
+      return callback
+    },
+    push(callback: Function) {
+      const id = scopedCallbacks.id++
+      scopedCallbacks.callbacks[id] = callback
+      return id
+    },
+  }
+}

packages/uni-core/src/helpers/index.ts

@@ -4,3 +4,4 @@ export * from './icon'
 export * from './page'
 export * from './scroll'
 export * from './getRealRoute'
+export * from './callbacks'

packages/uni-core/src/view/plugin/componentInstance.ts

@@ -33,7 +33,7 @@ export function $nne(this: ComponentPublicInstance, evt: Event) {
   return res
 }
 
-function createNativeEvent(evt: Event) {
+export function createNativeEvent(evt: Event | TouchEvent) {
   const { type, timeStamp, currentTarget } = evt
   const target = normalizeTarget(currentTarget as HTMLElement)
   const event = {
@@ -43,6 +43,10 @@ function createNativeEvent(evt: Event) {
     detail: {},
     currentTarget: target,
   }
+  if (evt.type.startsWith('touch')) {
+    ;(event as any).touches = (evt as TouchEvent).touches
+    ;(event as any).changedTouches = (evt as TouchEvent).changedTouches
+  }
   if (__PLATFORM__ === 'h5') {
     extend(event, {
       preventDefault() {

packages/uni-core/src/view/plugin/index.ts

@@ -13,3 +13,5 @@ export function initView(app: App) {
   initAppConfig(app._context.config)
   // TODO wxs,behaviors
 }
+
+export { createNativeEvent } from './componentInstance'

packages/uni-h5/src/platform/constants.ts

+export const TEMP_PATH = ''

packages/uni-h5/src/platform/index.ts

@@ -6,3 +6,6 @@ export {
   addIntersectionObserver,
   removeIntersectionObserver,
 } from '../service/api/ui/intersectionObserver'
+export * from './saveImage'
+export * from './constants'
+export { getSameOriginUrl } from '../helpers/file'

packages/uni-h5/src/platform/saveImage.ts

+export function saveImage(base64: string, dirname: string, callback: Function) {
+  callback(null, base64)
+}

packages/uni-h5/src/service/api/index.ts

@@ -67,5 +67,9 @@ export {
   createVideoContext,
   createMapContext,
   onTabBarMidButtonTap,
+  createCanvasContext,
+  canvasGetImageData,
+  canvasPutImageData,
+  canvasToTempFilePath,
 } from '@dcloudio/uni-api'
 //#endif

packages/uni-h5/vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import jscc from 'rollup-plugin-jscc'
 import strip from '@rollup/plugin-strip'
 import replace from '@rollup/plugin-replace'
+import minimatch from 'minimatch'
 
 import { stripOptions } from '@dcloudio/uni-cli-shared'
 import { isCustomElement } from '../uni-shared'
@@ -39,6 +40,8 @@ const rollupPlugins = [
       // 该插件限制了不能以__开头
       _NODE_JS_: FORMAT === 'cjs' ? 1 : 0,
     },
+    // exclude: ['pako.esm.mjs'],
+    exclude: [resolve('../../node_modules/pako/**')],
   }),
 ]
 if (FORMAT === 'cjs') {

packages/uni-mp-core/src/platform/index.ts

@@ -3,3 +3,6 @@ export function operateVideoPlayer() {}
 export function operateMap() {}
 export function addIntersectionObserver() {}
 export function removeIntersectionObserver() {}
+export function saveImage() {}
+export function getSameOriginUrl() {}
+export const TEMP_PATH = ''

yarn.lock

@@ -967,6 +967,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/pako@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.nlark.com/@types/pako/download/@types/pako-1.0.1.tgz#33b237f3c9aff44d0f82fe63acffa4a365ef4a61"
+  integrity sha1-M7I388mv9E0Pgv5jrP+ko2XvSmE=
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -5010,6 +5015,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.nlark.com/pako/download/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
+  integrity sha1-zfR14xtnhWUlFAbennWRlqDqekM=
+
 parchment@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"