refactor: canvas

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

@@ -361,6 +361,7 @@ type ActionsItem = {
   method: string
   data: ActionsItemData | Array<ActionsItem>
 }
+export type Actions = Array<ActionsItem>
 type DefaultState = typeof defaultState
 type Callback = (result: any) => void | undefined
 type LineCapType = 'butt' | 'round' | 'square'
@@ -371,8 +372,8 @@ type TextBaselineType = 'top' | 'bottom' | 'middle' | 'normal'
 export class CanvasContext implements UniApp.CanvasContext {
   id: string
   pageId: number
-  actions: Array<ActionsItem>
-  path: Array<ActionsItem>
+  actions: Actions
+  path: Actions
   subpath: Array<ActionsItem['data']>
   state: DefaultState
   drawingState: Array<DefaultState>
@@ -656,7 +657,7 @@ export class CanvasContext implements UniApp.CanvasContext {
       var style = fontFormat[1].trim().split(/\s/)
       var fontSize = parseFloat(fontFormat[3])
       var fontFamily = fontFormat[7]
-      var actions: Array<ActionsItem> = []
+      var actions: Actions = []
       style.forEach(function (value, index) {
         if (['italic', 'oblique', 'normal'].indexOf(value) > -1) {
           actions.push({

packages/uni-components/src/components/canvas/index.tsx

+import { ref, computed, ExtractPropTypes, Ref, onMounted } from 'vue'
+import { extend } from '@vue/shared'
+import type { Actions } from '@dcloudio/uni-api'
+import {
+  useAttrs,
+  useContextInfo,
+  useSubscribe,
+  withWebEvent,
+  defineBuiltInComponent,
+} from '@dcloudio/uni-components'
+import { getCurrentPageId, onEventPrevent } from '@dcloudio/uni-core'
+import {
+  saveImage,
+  getSameOriginUrl,
+  getRealPath,
+} from '@dcloudio/uni-platform'
+import ResizeSensor from '../resize-sensor'
+import { useNativeEvent, NativeEventTrigger } from '../../helpers/useEvent'
+import { pixelRatio, wrapper, initHidpi } from '../../helpers/hidpi'
+import { once } from '@dcloudio/uni-shared'
+
+const initHidpiOnce = /*#__PURE__*/ once(initHidpi)
+
+function $getRealPath(src: string) {
+  return src ? getRealPath(src) : src
+}
+
+function resolveColor(color: number[]) {
+  color = color.slice(0)
+  color[3] = color[3] / 255
+  return 'rgba(' + color.join(',') + ')'
+}
+
+function processTouches(target: EventTarget, touches: TouchEvent['touches']) {
+  const eventTarget = target as HTMLElement
+  return Array.from(touches).map((touch) => {
+    let boundingClientRect = eventTarget.getBoundingClientRect()
+    return {
+      identifier: touch.identifier,
+      x: touch.clientX - boundingClientRect.left,
+      y: touch.clientY - boundingClientRect.top,
+    }
+  })
+}
+
+let tempCanvas: HTMLCanvasElement
+function getTempCanvas(width = 0, height = 0) {
+  if (!tempCanvas) {
+    tempCanvas = document.createElement('canvas')
+  }
+  tempCanvas.width = width
+  tempCanvas.height = height
+  return tempCanvas
+}
+
+const props = {
+  canvasId: {
+    type: String,
+    default: '',
+  },
+  disableScroll: {
+    type: [Boolean, String],
+    default: false,
+  },
+}
+
+type Props = ExtractPropTypes<typeof props>
+
+export default /*#__PURE__*/ defineBuiltInComponent({
+  inheritAttrs: false,
+  name: 'Canvas',
+  compatConfig: {
+    MODE: 3,
+  },
+  props,
+  computed: {
+    id(): Props['canvasId'] {
+      return this.canvasId
+    },
+  },
+  setup(props, { emit, slots }) {
+    initHidpiOnce()
+    const canvas = ref<HTMLCanvasElement | null>(null)
+    const sensor = ref<HTMLElement | null>(null)
+    const actionsWaiting = ref(false)
+    const trigger = useNativeEvent(emit)
+    const { $attrs, $excludeAttrs, $listeners } = useAttrs({
+      excludeListeners: true,
+    })
+    const { _listeners } = useListeners(props, $listeners, trigger)
+
+    const { _handleSubscribe, _resize } = useMethods(canvas, actionsWaiting)
+
+    useSubscribe(
+      _handleSubscribe as (type: string, data: unknown) => void,
+      useContextInfo(props.canvasId),
+      true
+    )
+
+    onMounted(() => {
+      _resize()
+    })
+
+    return () => {
+      const { canvasId, disableScroll } = props
+      return (
+        <uni-canvas
+          canvas-id={canvasId}
+          disable-scroll={disableScroll}
+          {...$attrs.value}
+          {...$excludeAttrs.value}
+          {..._listeners.value}
+        >
+          <canvas
+            ref={canvas}
+            class="uni-canvas-canvas"
+            width="300"
+            height="150"
+          />
+          <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;">
+            {slots.default && slots.default()}
+          </div>
+          {/* @ts-ignore */}
+          <ResizeSensor ref={sensor} onResize={_resize} />
+        </uni-canvas>
+      )
+    }
+  },
+})
+
+function useListeners(
+  props: Props,
+  Listeners: Ref<{}>,
+  trigger: NativeEventTrigger
+) {
+  const _listeners = computed(() => {
+    let events = ['onTouchstart', 'onTouchmove', 'onTouchend']
+    let _$listeners = Listeners.value
+    let $listeners = Object.assign(
+      {},
+      (() => {
+        let obj = {}
+        for (const key in _$listeners) {
+          if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
+            const event = (_$listeners as any)[key]
+            ;(obj as any)[key] = event
+          }
+        }
+        return obj
+      })()
+    )
+    events.forEach((event) => {
+      let existing = ($listeners as any)[event]
+      let eventHandler = []
+      if (existing) {
+        eventHandler.push(
+          withWebEvent(($event) => {
+            trigger(
+              event.replace('on', '').toLocaleLowerCase(),
+              Object.assign(
+                {},
+                // $event无法直接assign
+                (() => {
+                  let obj = {}
+                  for (const key in $event) {
+                    ;(obj as any)[key] = $event[key]
+                  }
+                  return obj
+                })(),
+                {
+                  touches: processTouches($event.currentTarget, $event.touches),
+                  changedTouches: processTouches(
+                    $event.currentTarget,
+                    $event.changedTouches
+                  ),
+                }
+              ) as unknown as Event
+            )
+          })
+        )
+      }
+      if (props.disableScroll && event === 'onTouchmove') {
+        eventHandler.push(onEventPrevent)
+      }
+      ;($listeners as any)[event] = eventHandler
+    })
+    return $listeners
+  })
+
+  return {
+    _listeners,
+  }
+}
+
+function useMethods(
+  canvasRef: Ref<HTMLCanvasElement | null>,
+  actionsWaiting: Ref<boolean>
+) {
+  let _actionsDefer: Array<[Actions, boolean, number?]> = []
+  let _images: {
+    [key: string]: HTMLImageElement & { ready: boolean }
+  } = {}
+
+  function _resize() {
+    var canvas = canvasRef.value!
+    if (canvas.width > 0 && canvas.height > 0) {
+      var context = canvas.getContext('2d')!
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+      wrapper(canvas)
+      context.putImageData(imageData, 0, 0)
+    } else {
+      wrapper(canvas)
+    }
+  }
+  function actionsChanged({
+    actions,
+    reserve,
+    callbackId,
+  }: {
+    actions: Actions
+    reserve: boolean
+    callbackId: number
+  }) {
+    if (!actions) {
+      return
+    }
+    if (actionsWaiting.value) {
+      _actionsDefer.push([actions, reserve, callbackId])
+      return
+    }
+    var canvas = canvasRef.value!
+    var c2d = canvas.getContext('2d')!
+    if (!reserve) {
+      c2d.fillStyle = '#000000'
+      c2d.strokeStyle = '#000000'
+      c2d.shadowColor = '#000000'
+      c2d.shadowBlur = 0
+      c2d.shadowOffsetX = 0
+      c2d.shadowOffsetY = 0
+      c2d.setTransform(1, 0, 0, 1, 0, 0)
+      c2d.clearRect(0, 0, canvas.width, canvas.height)
+    }
+    preloadImage(actions)
+    for (let index = 0; index < actions.length; index++) {
+      type MultipleArray = Array<Array<number | string | number[]>>
+      type LinearGradient = Parameters<
+        CanvasFillStrokeStyles['createLinearGradient']
+      >
+      const action = actions[index]
+      let method = action.method
+      const data = action.data as Array<string | LinearGradient | MultipleArray>
+      if (/^set/.test(method) && method !== 'setTransform') {
+        const method1 = method[3].toLowerCase() + method.slice(4)
+        let color: CanvasGradient | string
+        if (method1 === 'fillStyle' || method1 === 'strokeStyle') {
+          if (data[0] === 'normal') {
+            color = resolveColor(data[1] as number[])
+          } else if (data[0] === 'linear') {
+            const LinearGradient = c2d.createLinearGradient(
+              ...(data[1] as LinearGradient)
+            )
+            ;(data[2] as MultipleArray).forEach(function (data2) {
+              const offset = data2[0] as number
+              const color = resolveColor(data2[1] as number[])
+              LinearGradient.addColorStop(offset, color)
+            })
+            color = LinearGradient
+          } else if (data[0] === 'radial') {
+            const x = data[1][0] as number
+            const y = data[1][1] as number
+            const r = data[1][2] as number
+            const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r)
+            // @ts-ignore
+            data[2].forEach(function (data2) {
+              const offset = data2[0]
+              const color = resolveColor(data2[1])
+              LinearGradient.addColorStop(offset, color)
+            })
+            color = LinearGradient
+          } else if (data[0] === 'pattern') {
+            const loaded = checkImageLoaded(
+              data[1] as string,
+              actions.slice(index + 1),
+              callbackId,
+              function (image) {
+                if (image) {
+                  c2d[method1] = c2d.createPattern(image, data[2] as string)!
+                }
+              }
+            )
+            if (!loaded) {
+              break
+            }
+            continue
+          }
+          c2d[method1] = color!
+        } else if (method1 === 'globalAlpha') {
+          c2d[method1] = Number(data[0]) / 255
+        } else if (method1 === 'shadow') {
+          var _ = [
+            'shadowOffsetX',
+            'shadowOffsetY',
+            'shadowBlur',
+            'shadowColor',
+          ]
+          data.forEach(function (color_, method_) {
+            // @ts-ignore
+            c2d[_[method_]] =
+              // @ts-ignore
+              _[method_] === 'shadowColor' ? resolveColor(color_) : color_
+          })
+        } else if (method1 === 'fontSize') {
+          // @ts-ignore
+          const font = c2d.__font__ || c2d.font
+          // @ts-ignore
+          c2d.__font__ = c2d.font = font.replace(/\d+\.?\d*px/, data[0] + 'px')
+        } else if (method1 === 'lineDash') {
+          // @ts-ignore
+          c2d.setLineDash(data[0])
+          // @ts-ignore
+          c2d.lineDashOffset = data[1] || 0
+        } else if (method1 === 'textBaseline') {
+          if (data[0] === 'normal') {
+            data[0] = 'alphabetic'
+          }
+          // @ts-ignore
+          c2d[method1] = data[0]
+        } else if (method1 === 'font') {
+          // @ts-ignore
+          c2d.__font__ = c2d.font = data[0]
+        } else {
+          // @ts-ignore
+          c2d[method1] = data[0]
+        }
+      } else if (method === 'fillPath' || method === 'strokePath') {
+        method = method.replace(/Path/, '')
+        c2d.beginPath()
+        data.forEach(function (data_) {
+          // @ts-ignore
+          c2d[data_.method].apply(c2d, data_.data)
+        })
+        // @ts-ignore
+        c2d[method]()
+      } else if (method === 'fillText') {
+        // @ts-ignore
+        c2d.fillText.apply(c2d, data)
+      } else if (method === 'drawImage') {
+        var A = (function () {
+          var dataArray = [...data]
+          var url = dataArray[0] as string
+          var otherData = dataArray.slice(1)
+          _images = _images || {}
+          if (
+            checkImageLoaded(
+              url,
+              actions.slice(index + 1),
+              callbackId,
+              function (image) {
+                if (image) {
+                  c2d.drawImage.apply(
+                    c2d,
+                    // @ts-ignore
+                    [image].concat(
+                      // @ts-ignore
+                      [...otherData.slice(4, 8)],
+                      [...otherData.slice(0, 4)]
+                    )
+                  )
+                }
+              }
+            )
+          )
+            return 'break'
+        })()
+        if (A === 'break') {
+          break
+        }
+      } else {
+        if (method === 'clip') {
+          data.forEach(function (data_) {
+            // @ts-ignore
+            c2d[data_.method].apply(c2d, data_.data)
+          })
+          c2d.clip()
+        } else {
+          // @ts-ignore
+          c2d[method].apply(c2d, data)
+        }
+      }
+    }
+    if (!actionsWaiting.value && callbackId) {
+      UniViewJSBridge.publishHandler(
+        'onCanvasMethodCallback',
+        {
+          callbackId,
+          data: {
+            errMsg: 'drawCanvas:ok',
+          },
+        },
+        getCurrentPageId()
+      )
+    }
+  }
+  function preloadImage(actions: Actions) {
+    actions.forEach(function (action) {
+      var method = action.method
+      var data = action.data
+      var src = ''
+      if (method === 'drawImage') {
+        src = data[0] as string
+        src = $getRealPath(src)
+        data[0] = src
+      } else if (method === 'setFillStyle' && data[0] === 'pattern') {
+        src = data[1] as string
+        src = $getRealPath(src)
+        data[1] = src
+      }
+      if (src && !_images[src]) {
+        loadImage()
+      }
+      /**
+       * 加载图像
+       */
+      function loadImage() {
+        // @ts-ignore
+        const image = (_images[src] = new Image())
+        image.onload = function () {
+          // @ts-ignore
+          image.ready = true
+        }
+
+        // 安卓 WebView 除本地路径无跨域问题
+        if (__PLATFORM__ === 'app' && navigator.vendor === 'Google Inc.') {
+          if (src.indexOf('file://') === 0) {
+            image.crossOrigin = 'anonymous'
+          }
+          image.src = src
+          return
+        }
+        getSameOriginUrl(src)
+          .then((src) => {
+            image.src = src
+          })
+          .catch(() => {
+            image.src = src
+          })
+      }
+    })
+  }
+  function checkImageLoaded(
+    src: string,
+    actions: Actions,
+    callbackId: number,
+    fn: (a: CanvasImageSource) => void
+  ) {
+    var image = _images[src]
+    if (image.ready) {
+      fn(image)
+      return true
+    } else {
+      _actionsDefer.unshift([actions, true])
+      actionsWaiting.value = true
+      image.onload = function () {
+        image.ready = true
+        fn(image)
+        actionsWaiting.value = false
+        var actions = _actionsDefer.slice(0)
+        _actionsDefer = []
+        for (var action = actions.shift(); action; ) {
+          actionsChanged({
+            actions: action[0],
+            reserve: action[1],
+            callbackId,
+          })
+          action = actions.shift()
+        }
+      }
+      return false
+    }
+  }
+  function getImageData({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    hidpi = true,
+    dataType,
+    quality = 1,
+    type = 'png',
+    callbackId,
+  }: {
+    x: number
+    y: number
+    width: number
+    height: number
+    destWidth: number
+    destHeight: number
+    hidpi: boolean
+    dataType: string
+    quality: number
+    type: string
+    callbackId?: number
+  }) {
+    const canvas = canvasRef.value!
+    let data: string | number[]
+    const maxWidth = canvas.offsetWidth - x
+    width = width ? Math.min(width, maxWidth) : maxWidth
+    const maxHeight = canvas.offsetHeight - y
+    height = height ? Math.min(height, maxHeight) : maxHeight
+    if (!hidpi) {
+      if (!destWidth && !destHeight) {
+        destWidth = Math.round(width * pixelRatio)
+        destHeight = Math.round(height * pixelRatio)
+      } else if (!destWidth) {
+        destWidth = Math.round((width / height) * destHeight)
+      } else if (!destHeight) {
+        destHeight = Math.round((height / width) * destWidth)
+      }
+    } else {
+      destWidth = width
+      destHeight = height
+    }
+    const newCanvas = getTempCanvas(destWidth, destHeight)
+    const context = newCanvas.getContext('2d')!
+    if (type === 'jpeg' || type === 'jpg') {
+      type = 'jpeg'
+      context.fillStyle = '#fff'
+      context.fillRect(0, 0, destWidth, destHeight)
+    }
+    // @ts-ignore
+    context.__hidpi__ = true
+    // @ts-ignore
+    context.drawImageByCanvas(
+      canvas,
+      x,
+      y,
+      width,
+      height,
+      0,
+      0,
+      destWidth,
+      destHeight,
+      false
+    )
+    let result
+    try {
+      let compressed
+      if (dataType === 'base64') {
+        data = newCanvas.toDataURL(`image/${type}`, quality)
+      } else {
+        const imgData = context.getImageData(0, 0, destWidth, destHeight)
+        if (__PLATFORM__ === 'app') {
+          const pako = require('pako') // eslint-disable-line no-restricted-globals
+          data = pako.deflateRaw(imgData.data as any, { to: 'string' })
+          compressed = true
+        } else {
+          // fix [...]展开TypedArray在低版本手机报错的问题，使用Array.prototype.slice
+          data = Array.prototype.slice.call(imgData.data)
+        }
+      }
+      result = {
+        errMsg: 'canvasGetImageData:ok',
+        data,
+        compressed,
+        width: destWidth,
+        height: destHeight,
+      }
+    } catch (error) {
+      result = {
+        errMsg: `canvasGetImageData:fail ${error}`,
+      }
+    }
+    newCanvas.height = newCanvas.width = 0
+    // @ts-ignore
+    context.__hidpi__ = false
+    if (!callbackId) {
+      return result
+    } else {
+      UniViewJSBridge.publishHandler(
+        'onCanvasMethodCallback',
+        {
+          callbackId,
+          data: result,
+        },
+        getCurrentPageId()
+      )
+    }
+  }
+  function putImageData({
+    data,
+    x,
+    y,
+    width,
+    height,
+    compressed,
+    callbackId,
+  }: {
+    data: Array<number>
+    x: number
+    y: number
+    width: number
+    height: number
+    compressed: boolean
+    callbackId: number
+  }) {
+    try {
+      if (!height) {
+        height = Math.round(data.length / 4 / width)
+      }
+      const canvas = getTempCanvas(width, height)
+      const context = canvas.getContext('2d')!
+      if (__PLATFORM__ === 'app' && compressed) {
+        const pako = require('pako') // eslint-disable-line no-restricted-globals
+        data = pako.inflateRaw(data) as any
+      }
+      context.putImageData(
+        new ImageData(new Uint8ClampedArray(data), width, height),
+        0,
+        0
+      )
+      canvasRef.value!.getContext('2d')!.drawImage(canvas, x, y, width, height)
+      canvas.height = canvas.width = 0
+    } catch (error) {
+      UniViewJSBridge.publishHandler(
+        'onCanvasMethodCallback',
+        {
+          callbackId,
+          data: {
+            errMsg: 'canvasPutImageData:fail',
+          },
+        },
+        getCurrentPageId()
+      )
+      return
+    }
+    UniViewJSBridge.publishHandler(
+      'onCanvasMethodCallback',
+      {
+        callbackId,
+        data: {
+          errMsg: 'canvasPutImageData:ok',
+        },
+      },
+      getCurrentPageId()
+    )
+  }
+  function toTempFilePath({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    fileType,
+    quality,
+    dirname,
+    callbackId,
+  }: {
+    x: number
+    y: number
+    width: number
+    height: number
+    destWidth: number
+    destHeight: number
+    fileType: string
+    quality: number
+    dirname: string
+    callbackId: number
+  }) {
+    const res = getImageData({
+      x,
+      y,
+      width,
+      height,
+      destWidth,
+      destHeight,
+      hidpi: false,
+      dataType: 'base64',
+      type: fileType,
+      quality,
+    })!
+    if (!res.data || !res.data.length) {
+      UniViewJSBridge.publishHandler(
+        'onCanvasMethodCallback',
+        {
+          callbackId,
+          data: {
+            errMsg: res!.errMsg.replace('canvasPutImageData', 'toTempFilePath'),
+          },
+        },
+        getCurrentPageId()
+      )
+      return
+    }
+    saveImage(res.data as string, dirname, (error, tempFilePath) => {
+      let errMsg = `toTempFilePath:${error ? 'fail' : 'ok'}`
+      if (error) {
+        errMsg += ` ${error.message}`
+      }
+      UniViewJSBridge.publishHandler(
+        'onCanvasMethodCallback',
+        {
+          callbackId,
+          data: {
+            errMsg,
+            tempFilePath: tempFilePath,
+          },
+        },
+        getCurrentPageId()
+      )
+    })
+  }
+
+  const methods = {
+    actionsChanged,
+    getImageData,
+    putImageData,
+    toTempFilePath,
+  }
+
+  function _handleSubscribe(type: keyof typeof methods, data = {}) {
+    let method = methods[type]
+    if (type.indexOf('_') !== 0 && typeof method === 'function') {
+      method(data as any)
+    }
+  }
+
+  return extend(methods, {
+    _resize,
+    _handleSubscribe,
+  })
+}

packages/uni-components/src/components/canvas/index.vue

-<template>
-  <uni-canvas
-    :canvas-id="canvasId"
-    :disable-scroll="disableScroll"
-    v-bind="{ ...Attrs, ...ExcludeAttrs }"
-    v-on="_listeners"
-  >
-    <canvas class="uni-canvas-canvas" ref="canvas" width="300" height="150" />
-    <div
-      style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      "
-    >
-      <slot />
-    </div>
-    <ResizeSensor ref="sensor" @resize="_resize" />
-  </uni-canvas>
-</template>
-<script lang="ts">
-import { ref } from "vue";
-import {
-  useAttrs,
-  useContextInfo,
-  useSubscribe,
-  withWebEvent,
-} from "@dcloudio/uni-components";
-import { getCurrentPageId, onEventPrevent } from "@dcloudio/uni-core";
-import { saveImage, getSameOriginUrl, getRealPath } from "@dcloudio/uni-platform";
-import ResizeSensor from "../resize-sensor";
-import { useNativeEvent } from "../../helpers/useEvent";
-import { pixelRatio, wrapper, initHidpi } from "../../helpers/hidpi";
-import { once } from "@dcloudio/uni-shared";
-
-const initHidpiOnce = /*#__PURE__*/ once(initHidpi)
-
-function $getRealPath(src) {
-  return src ? getRealPath(src) : src;
-}
-
-function resolveColor(color) {
-  color = color.slice(0);
-  color[3] = color[3] / 255;
-  return "rgba(" + color.join(",") + ")";
-}
-
-function processTouches(target, touches) {
-  return [].map.call(touches, (touch) => {
-    var boundingClientRect = target.getBoundingClientRect();
-    return {
-      identifier: touch.identifier,
-      x: touch.clientX - boundingClientRect.left,
-      y: touch.clientY - boundingClientRect.top,
-    };
-  });
-}
-
-var tempCanvas;
-function getTempCanvas(width = 0, height = 0) {
-  if (!tempCanvas) {
-    tempCanvas = document.createElement("canvas");
-  }
-  tempCanvas.width = width;
-  tempCanvas.height = height;
-  return tempCanvas;
-}
-
-export default {
-  name: "Canvas",
-  inheritAttrs: false,
-  compatConfig: {
-    MODE: 3,
-  },
-  components: {
-    ResizeSensor,
-  },
-  props: {
-    canvasId: {
-      type: String,
-      default: "",
-    },
-    disableScroll: {
-      type: [Boolean, String],
-      default: false,
-    },
-  },
-  data() {
-    return {
-      actionsWaiting: false,
-    };
-  },
-  computed: {
-    id() {
-      return this.canvasId;
-    },
-    _listeners() {
-      let events = ["touchstart", "touchmove", "touchend"];
-      let _$listeners = this.Listeners;
-      let $listeners = Object.assign(
-        {},
-        (() => {
-          let obj = {};
-          for (const key in _$listeners) {
-            if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
-              const event = _$listeners[key];
-              obj[key.replace("on", "").toLowerCase()] = event;
-            }
-          }
-          return obj;
-        })()
-      );
-      events.forEach((event) => {
-        let existing = $listeners[event];
-        let eventHandler = [];
-        if (existing) {
-          eventHandler.push(
-            withWebEvent(($event) => {
-              this.$trigger(
-                event,
-                Object.assign(
-                  {},
-                  // $event无法直接assign
-                  (() => {
-                    let obj = {};
-                    for (const key in $event) {
-                      obj[key] = $event[key];
-                    }
-                    return obj;
-                  })(),
-                  {
-                    touches: processTouches($event.currentTarget, $event.touches),
-                    changedTouches: processTouches(
-                      $event.currentTarget,
-                      $event.changedTouches
-                    ),
-                  }
-                )
-              );
-            })
-          );
-        }
-        if (this.disableScroll && event === "touchmove") {
-          eventHandler.push(onEventPrevent);
-        }
-        $listeners[event] = eventHandler;
-      });
-      return $listeners;
-    },
-  },
-  created() {
-    this._actionsDefer = [];
-    this._images = {};
-    const id = useContextInfo();
-    useSubscribe(this._handleSubscribe, id, true);
-  },
-  beforeMount() {
-    // 将来放在onBeforeMount时，编译至cjs时，会自动摇树掉
-    initHidpiOnce();
-  },
-  mounted() {
-    this.$trigger = useNativeEvent(this.$emit);
-
-    this._resize();
-  },
-  beforeUnmount() {
-    const canvas = this.canvas;
-    canvas.height = canvas.width = 0;
-  },
-  methods: {
-    _handleSubscribe(type, data = {}) {
-      var method = this[type];
-      if (type.indexOf("_") !== 0 && typeof method === "function") {
-        method(data);
-      }
-    },
-    _resize() {
-      var canvas = this.canvas;
-      if (canvas.width > 0 && canvas.height > 0) {
-        var context = canvas.getContext("2d");
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        wrapper(canvas);
-        context.putImageData(imageData, 0, 0);
-      } else {
-        wrapper(canvas);
-      }
-    },
-    actionsChanged({ actions, reserve, callbackId }) {
-      var self = this;
-      if (!actions) {
-        return;
-      }
-      if (this.actionsWaiting) {
-        this._actionsDefer.push([actions, reserve, callbackId]);
-        return;
-      }
-      var canvas = this.canvas;
-      var c2d = canvas.getContext("2d");
-      if (!reserve) {
-        c2d.fillStyle = "#000000";
-        c2d.strokeStyle = "#000000";
-        c2d.shadowColor = "#000000";
-        c2d.shadowBlur = 0;
-        c2d.shadowOffsetX = 0;
-        c2d.shadowOffsetY = 0;
-        c2d.setTransform(1, 0, 0, 1, 0, 0);
-        c2d.clearRect(0, 0, canvas.width, canvas.height);
-      }
-      this.preloadImage(actions);
-      for (let index = 0; index < actions.length; index++) {
-        const action = actions[index];
-        let method = action.method;
-        const data = action.data;
-        if (/^set/.test(method) && method !== "setTransform") {
-          const method1 = method[3].toLowerCase() + method.slice(4);
-          let color;
-          if (method1 === "fillStyle" || method1 === "strokeStyle") {
-            if (data[0] === "normal") {
-              color = resolveColor(data[1]);
-            } else if (data[0] === "linear") {
-              const LinearGradient = c2d.createLinearGradient(...data[1]);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "radial") {
-              const x = data[1][0];
-              const y = data[1][1];
-              const r = data[1][2];
-              const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "pattern") {
-              const loaded = this.checkImageLoaded(
-                data[1],
-                actions.slice(index + 1),
-                callbackId,
-                function(image) {
-                  if (image) {
-                    c2d[method1] = c2d.createPattern(image, data[2]);
-                  }
-                }
-              );
-              if (!loaded) {
-                break;
-              }
-              continue;
-            }
-            c2d[method1] = color;
-          } else if (method1 === "globalAlpha") {
-            c2d[method1] = data[0] / 255;
-          } else if (method1 === "shadow") {
-            var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
-            data.forEach(function(color_, method_) {
-              c2d[_[method_]] =
-                _[method_] === "shadowColor" ? resolveColor(color_) : color_;
-            });
-          } else if (method1 === "fontSize") {
-            const font = c2d.__font__ || c2d.font;
-            c2d.__font__ = c2d.font = font.replace(/\d+\.?\d*px/, data[0] + "px");
-          } else if (method1 === "lineDash") {
-            c2d.setLineDash(data[0]);
-            c2d.lineDashOffset = data[1] || 0;
-          } else if (method1 === "textBaseline") {
-            if (data[0] === "normal") {
-              data[0] = "alphabetic";
-            }
-            c2d[method1] = data[0];
-          } else if (method1 === "font") {
-            c2d.__font__ = c2d.font = data[0];
-          } else {
-            c2d[method1] = data[0];
-          }
-        } else if (method === "fillPath" || method === "strokePath") {
-          method = method.replace(/Path/, "");
-          c2d.beginPath();
-          data.forEach(function(data_) {
-            c2d[data_.method].apply(c2d, data_.data);
-          });
-          c2d[method]();
-        } else if (method === "fillText") {
-          c2d.fillText.apply(c2d, data);
-        } else if (method === "drawImage") {
-          var A = (function() {
-            var dataArray = [...data];
-            var url = dataArray[0];
-            var otherData = dataArray.slice(1);
-            self._images = self._images || {};
-            if (
-              !self.checkImageLoaded(
-                url,
-                actions.slice(index + 1),
-                callbackId,
-                function(image) {
-                  if (image) {
-                    c2d.drawImage.apply(
-                      c2d,
-                      [image].concat(
-                        [...otherData.slice(4, 8)],
-                        [...otherData.slice(0, 4)]
-                      )
-                    );
-                  }
-                }
-              )
-            )
-              return "break";
-          })();
-          if (A === "break") {
-            break;
-          }
-        } else {
-          if (method === "clip") {
-            data.forEach(function(data_) {
-              c2d[data_.method].apply(c2d, data_.data);
-            });
-            c2d.clip();
-          } else {
-            c2d[method].apply(c2d, data);
-          }
-        }
-      }
-      if (!this.actionsWaiting && callbackId) {
-        UniViewJSBridge.publishHandler(
-          "onCanvasMethodCallback",
-          {
-            callbackId,
-            data: {
-              errMsg: "drawCanvas:ok",
-            },
-          },
-          getCurrentPageId()
-        );
-      }
-    },
-    preloadImage: function(actions) {
-      var self = this;
-      actions.forEach(function(action) {
-        var method = action.method;
-        var data = action.data;
-        var src = "";
-        if (method === "drawImage") {
-          src = data[0];
-          src = $getRealPath(src);
-          data[0] = src;
-        } else if (method === "setFillStyle" && data[0] === "pattern") {
-          src = data[1];
-          src = $getRealPath(src);
-          data[1] = src;
-        }
-        if (src && !self._images[src]) {
-          loadImage();
-        }
-        /**
-         * 加载图像
-         */
-        function loadImage() {
-          const image = (self._images[src] = new Image());
-          image.onload = function() {
-            image.ready = true;
-          };
-
-          // 安卓 WebView 除本地路径无跨域问题
-          if (__PLATFORM__ === "app-plus" && navigator.vendor === "Google Inc.") {
-            if (src.indexOf("file://") === 0) {
-              image.crossOrigin = "anonymous";
-            }
-            image.src = src;
-            return;
-          }
-          getSameOriginUrl(src)
-            .then((src) => {
-              image.src = src;
-            })
-            .catch(() => {
-              image.src = src;
-            });
-        }
-      });
-    },
-    checkImageLoaded: function(src, actions, callbackId, fn) {
-      var self = this;
-      var image = this._images[src];
-      if (image.ready) {
-        fn(image);
-        return true;
-      } else {
-        this._actionsDefer.unshift([actions, true]);
-        this.actionsWaiting = true;
-        image.onload = function() {
-          image.ready = true;
-          fn(image);
-          self.actionsWaiting = false;
-          var actions = self._actionsDefer.slice(0);
-          self._actionsDefer = [];
-          for (var action = actions.shift(); action;) {
-            self.actionsChanged({
-              actions: action[0],
-              reserve: action[1],
-              callbackId,
-            });
-            action = actions.shift();
-          }
-        };
-        return false;
-      }
-    },
-    getImageData({
-      x = 0,
-      y = 0,
-      width,
-      height,
-      destWidth,
-      destHeight,
-      hidpi = true,
-      dataType,
-      quality = 1,
-      type = "png",
-      callbackId,
-    }) {
-      const canvas = this.canvas;
-      let data;
-      const maxWidth = canvas.offsetWidth - x;
-      width = width ? Math.min(width, maxWidth) : maxWidth;
-      const maxHeight = canvas.offsetHeight - y;
-      height = height ? Math.min(height, maxHeight) : maxHeight;
-      if (!hidpi) {
-        if (!destWidth && !destHeight) {
-          destWidth = Math.round(width * pixelRatio);
-          destHeight = Math.round(height * pixelRatio);
-        } else if (!destWidth) {
-          destWidth = Math.round((width / height) * destHeight);
-        } else if (!destHeight) {
-          destHeight = Math.round((height / width) * destWidth);
-        }
-      } else {
-        destWidth = width;
-        destHeight = height;
-      }
-      const newCanvas = getTempCanvas(destWidth, destHeight);
-      const context = newCanvas.getContext("2d");
-      if (type === "jpeg" || type === "jpg") {
-        type = "jpeg";
-        context.fillStyle = "#fff";
-        context.fillRect(0, 0, destWidth, destHeight);
-      }
-      context.__hidpi__ = true;
-      context.drawImageByCanvas(
-        canvas,
-        x,
-        y,
-        width,
-        height,
-        0,
-        0,
-        destWidth,
-        destHeight,
-        false
-      );
-      let result;
-      try {
-        let compressed;
-        if (dataType === "base64") {
-          data = newCanvas.toDataURL(`image/${type}`, quality);
-        } else {
-          const imgData = context.getImageData(0, 0, destWidth, destHeight);
-          if (__PLATFORM__ === "app-plus") {
-            const pako = require("pako");
-            data = pako.deflateRaw(imgData.data, { to: "string" });
-            compressed = true;
-          } else {
-            // fix [...]展开TypedArray在低版本手机报错的问题，使用Array.prototype.slice
-            data = Array.prototype.slice.call(imgData.data);
-          }
-        }
-        result = {
-          errMsg: "canvasGetImageData:ok",
-          data,
-          compressed,
-          width: destWidth,
-          height: destHeight,
-        };
-      } catch (error) {
-        result = {
-          errMsg: `canvasGetImageData:fail ${error}`,
-        };
-      }
-      newCanvas.height = newCanvas.width = 0;
-      context.__hidpi__ = false;
-      if (!callbackId) {
-        return result;
-      } else {
-        UniViewJSBridge.publishHandler(
-          "onCanvasMethodCallback",
-          {
-            callbackId,
-            data: result,
-          },
-          getCurrentPageId()
-        );
-      }
-    },
-    putImageData({ data, x, y, width, height, compressed, callbackId }) {
-      try {
-        if (!height) {
-          height = Math.round(data.length / 4 / width);
-        }
-        const canvas = getTempCanvas(width, height);
-        const context = canvas.getContext("2d");
-        if (__PLATFORM__ === "app-plus" && compressed) {
-          const pako = require("pako");
-          data = pako.inflateRaw(data);
-        }
-        context.putImageData(
-          new ImageData(new Uint8ClampedArray(data), width, height),
-          0,
-          0
-        );
-        this.canvas.getContext("2d").drawImage(canvas, x, y, width, height);
-        canvas.height = canvas.width = 0;
-      } catch (error) {
-        UniViewJSBridge.publishHandler(
-          "onCanvasMethodCallback",
-          {
-            callbackId,
-            data: {
-              errMsg: "canvasPutImageData:fail",
-            },
-          },
-          getCurrentPageId()
-        );
-        return;
-      }
-      UniViewJSBridge.publishHandler(
-        "onCanvasMethodCallback",
-        {
-          callbackId,
-          data: {
-            errMsg: "canvasPutImageData:ok",
-          },
-        },
-        getCurrentPageId()
-      );
-    },
-    toTempFilePath({
-      x = 0,
-      y = 0,
-      width,
-      height,
-      destWidth,
-      destHeight,
-      fileType,
-      quality,
-      dirname,
-      callbackId,
-    }) {
-      const res = this.getImageData({
-        x,
-        y,
-        width,
-        height,
-        destWidth,
-        destHeight,
-        hidpi: false,
-        dataType: "base64",
-        type: fileType,
-        quality,
-      });
-      if (!res.data || !res.data.length) {
-        UniViewJSBridge.publishHandler(
-          "onCanvasMethodCallback",
-          {
-            callbackId,
-            data: {
-              errMsg: res.errMsg.replace("canvasPutImageData", "toTempFilePath"),
-            },
-          },
-          getCurrentPageId()
-        );
-        return;
-      }
-      saveImage(res.data, dirname, (error, tempFilePath) => {
-        let errMsg = `toTempFilePath:${error ? "fail" : "ok"}`;
-        if (error) {
-          errMsg += ` ${error.message}`;
-        }
-        UniViewJSBridge.publishHandler(
-          "onCanvasMethodCallback",
-          {
-            callbackId,
-            data: {
-              errMsg,
-              tempFilePath: tempFilePath,
-            },
-          },
-          getCurrentPageId()
-        );
-      });
-    },
-  },
-  setup() {
-    const canvas = ref(null);
-    const sensor = ref(null);
-    const {
-      $attrs: Attrs,
-      $excludeAttrs: ExcludeAttrs,
-      $listeners: Listeners,
-    } = useAttrs({
-      excludeListeners: true,
-    });
-
-    return {
-      canvas,
-      sensor,
-      Attrs,
-      ExcludeAttrs,
-      Listeners,
-    };
-  },
-};
-</script>

packages/uni-components/src/components/index.ts

 import Audio from './audio/index.vue'
 import Button from './button/index'
-import Canvas from './canvas/index.vue'
+import Canvas from './canvas/index'
 import Checkbox from './checkbox/index'
 import CheckboxGroup from './checkbox-group/index'
 import Editor from './editor/index'

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

@@ -13,12 +13,12 @@ export interface HTMLElementWithContextInfo extends HTMLElement {
   __uniContextInfo?: ContextInfo
 }
 let index = 0
-export function useContextInfo() {
+export function useContextInfo(_id?: string) {
   const page = useCurrentPageId()
   const instance = getCurrentInstance()!
   const vm = instance.proxy!
   const type = vm.$options.name!.toLowerCase() as ContextType
-  const id = (vm as any).id || `context${index++}`
+  const id = _id || (vm as any).id || `context${index++}`
   onMounted(() => {
     const el = vm.$el as HTMLElementWithContextInfo
     el.__uniContextInfo = {

packages/uni-h5/dist/uni-h5.cjs.js

 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
-var __spreadValues = (a2, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
-    }
-  return a2;
-};
 Object.defineProperty(exports, "__esModule", {value: true});
 exports[Symbol.toStringTag] = "Module";
 var shared = require("@vue/shared");
@@ -883,7 +867,7 @@ function throttle(fn, wait) {
   };
   return newFn;
 }
-const _sfc_main$5 = {
+const _sfc_main$4 = {
   name: "Audio",
   mixins: [subscriber],
   props: {
@@ -1002,13 +986,13 @@ const _sfc_main$5 = {
     }
   }
 };
-const _hoisted_1$4 = {class: "uni-audio-default"};
-const _hoisted_2$3 = {class: "uni-audio-right"};
+const _hoisted_1$3 = {class: "uni-audio-default"};
+const _hoisted_2$2 = {class: "uni-audio-right"};
 const _hoisted_3$2 = {class: "uni-audio-time"};
 const _hoisted_4$2 = {class: "uni-audio-info"};
 const _hoisted_5$1 = {class: "uni-audio-name"};
 const _hoisted_6$1 = {class: "uni-audio-author"};
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock("uni-audio", vue.mergeProps({
     id: $props.id,
     controls: !!$props.controls
@@ -1018,7 +1002,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       loop: $props.loop,
       style: {"display": "none"}
     }, null, 8, ["loop"]),
-    vue.createVNode("div", _hoisted_1$4, [
+    vue.createVNode("div", _hoisted_1$3, [
       vue.createVNode("div", {
         style: "background-image: url(" + _ctx.$getRealPath($props.poster) + ");",
         class: "uni-audio-left"
@@ -1028,7 +1012,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[1] || (_cache[1] = (...args) => $options.trigger && $options.trigger(...args))
         }, null, 2)
       ], 4),
-      vue.createVNode("div", _hoisted_2$3, [
+      vue.createVNode("div", _hoisted_2$2, [
         vue.createVNode("div", _hoisted_3$2, vue.toDisplayString($data.currentTime), 1),
         vue.createVNode("div", _hoisted_4$2, [
           vue.createVNode("div", _hoisted_5$1, vue.toDisplayString($props.name), 1),
@@ -1038,7 +1022,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 16, ["id", "controls"]);
 }
-_sfc_main$5.render = _sfc_render$5;
+_sfc_main$4.render = _sfc_render$4;
 function converPx(value) {
   if (/^-?\d+[ur]px$/i.test(value)) {
     return value.replace(/(^-?\d+)[ur]px$/i, (text, num) => {
@@ -1270,7 +1254,7 @@ function normalizeCustomEvent(name, domEvt, el, detail) {
   };
 }
 const uniFormKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniForm" : "uf");
-var index$u = /* @__PURE__ */ defineBuiltInComponent({
+var index$v = /* @__PURE__ */ defineBuiltInComponent({
   name: "Form",
   setup(_props, {
     slots,
@@ -1310,15 +1294,15 @@ function provideForm(emit2) {
   return fields2;
 }
 const uniLabelKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniLabel" : "ul");
-const props$r = {
+const props$s = {
   for: {
     type: String,
     default: ""
   }
 };
-var index$t = /* @__PURE__ */ defineBuiltInComponent({
+var index$u = /* @__PURE__ */ defineBuiltInComponent({
   name: "Label",
-  props: props$r,
+  props: props$s,
   setup(props2, {
     slots
   }) {
@@ -1360,7 +1344,7 @@ function useProvideLabel() {
   });
   return handlers;
 }
-var index$s = /* @__PURE__ */ defineBuiltInComponent({
+var index$t = /* @__PURE__ */ defineBuiltInComponent({
   name: "Button",
   props: {
     id: {
@@ -1540,8 +1524,9 @@ function resolveColor(color) {
   return "rgba(" + color.join(",") + ")";
 }
 function processTouches(target, touches) {
-  return [].map.call(touches, (touch) => {
-    var boundingClientRect = target.getBoundingClientRect();
+  const eventTarget = target;
+  return Array.from(touches).map((touch) => {
+    let boundingClientRect = eventTarget.getBoundingClientRect();
     return {
       identifier: touch.identifier,
       x: touch.clientX - boundingClientRect.left,
@@ -1549,7 +1534,7 @@ function processTouches(target, touches) {
     };
   });
 }
-var tempCanvas;
+let tempCanvas;
 function getTempCanvas(width = 0, height = 0) {
   if (!tempCanvas) {
     tempCanvas = document.createElement("canvas");
@@ -1558,492 +1543,497 @@ function getTempCanvas(width = 0, height = 0) {
   tempCanvas.height = height;
   return tempCanvas;
 }
-var _sfc_main$4 = {
-  name: "Canvas",
+const props$r = {
+  canvasId: {
+    type: String,
+    default: ""
+  },
+  disableScroll: {
+    type: [Boolean, String],
+    default: false
+  }
+};
+var index$s = /* @__PURE__ */ defineBuiltInComponent({
   inheritAttrs: false,
+  name: "Canvas",
   compatConfig: {
     MODE: 3
   },
-  components: {
-    ResizeSensor
-  },
-  props: {
-    canvasId: {
-      type: String,
-      default: ""
-    },
-    disableScroll: {
-      type: [Boolean, String],
-      default: false
-    }
-  },
-  data() {
-    return {
-      actionsWaiting: false
-    };
-  },
+  props: props$r,
   computed: {
     id() {
       return this.canvasId;
-    },
-    _listeners() {
-      let events = ["touchstart", "touchmove", "touchend"];
-      let _$listeners = this.Listeners;
-      let $listeners = Object.assign({}, (() => {
-        let obj = {};
-        for (const key in _$listeners) {
-          if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
-            const event = _$listeners[key];
-            obj[key.replace("on", "").toLowerCase()] = event;
-          }
-        }
-        return obj;
-      })());
-      events.forEach((event) => {
-        let existing = $listeners[event];
-        let eventHandler = [];
-        if (existing) {
-          eventHandler.push(withWebEvent(($event) => {
-            this.$trigger(event, Object.assign({}, (() => {
-              let obj = {};
-              for (const key in $event) {
-                obj[key] = $event[key];
-              }
-              return obj;
-            })(), {
-              touches: processTouches($event.currentTarget, $event.touches),
-              changedTouches: processTouches($event.currentTarget, $event.changedTouches)
-            }));
-          }));
-        }
-        if (this.disableScroll && event === "touchmove") {
-          eventHandler.push(onEventPrevent);
-        }
-        $listeners[event] = eventHandler;
-      });
-      return $listeners;
     }
   },
-  created() {
-    this._actionsDefer = [];
-    this._images = {};
-    const id = useContextInfo();
-    useSubscribe(this._handleSubscribe, id, true);
-  },
-  beforeMount() {
+  setup(props2, {
+    emit: emit2,
+    slots
+  }) {
     initHidpiOnce();
-  },
-  mounted() {
-    this.$trigger = useNativeEvent(this.$emit);
-    this._resize();
-  },
-  beforeUnmount() {
-    const canvas = this.canvas;
-    canvas.height = canvas.width = 0;
-  },
-  methods: {
-    _handleSubscribe(type, data = {}) {
-      var method = this[type];
-      if (type.indexOf("_") !== 0 && typeof method === "function") {
-        method(data);
-      }
-    },
-    _resize() {
-      var canvas = this.canvas;
-      if (canvas.width > 0 && canvas.height > 0) {
-        var context = canvas.getContext("2d");
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        wrapper(canvas);
-        context.putImageData(imageData, 0, 0);
-      } else {
-        wrapper(canvas);
+    const canvas = vue.ref(null);
+    const sensor = vue.ref(null);
+    const actionsWaiting = vue.ref(false);
+    const trigger = useNativeEvent(emit2);
+    const {
+      $attrs,
+      $excludeAttrs,
+      $listeners
+    } = useAttrs({
+      excludeListeners: true
+    });
+    const {
+      _listeners
+    } = useListeners(props2, $listeners, trigger);
+    const {
+      _handleSubscribe,
+      _resize
+    } = useMethods(canvas, actionsWaiting);
+    useSubscribe(_handleSubscribe, useContextInfo(props2.canvasId), true);
+    return () => {
+      const {
+        canvasId,
+        disableScroll
+      } = props2;
+      return vue.createVNode("uni-canvas", vue.mergeProps({
+        "canvas-id": canvasId,
+        "disable-scroll": disableScroll
+      }, $attrs.value, $excludeAttrs.value, _listeners.value), [vue.createVNode("canvas", {
+        "ref": canvas,
+        "class": "uni-canvas-canvas",
+        "width": "300",
+        "height": "150"
+      }, null, 512), vue.createVNode("div", {
+        "style": "position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;"
+      }, [slots.default && slots.default()]), vue.createVNode(ResizeSensor, {
+        "ref": sensor,
+        "onResize": _resize
+      }, null, 8, ["onResize"])], 16, ["canvas-id", "disable-scroll"]);
+    };
+  }
+});
+function useListeners(props2, Listeners, trigger) {
+  const _listeners = vue.computed(() => {
+    let events = ["onTouchstart", "onTouchmove", "onTouchend"];
+    let _$listeners = Listeners.value;
+    let $listeners = Object.assign({}, (() => {
+      let obj = {};
+      for (const key in _$listeners) {
+        if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
+          const event = _$listeners[key];
+          obj[key] = event;
+        }
       }
-    },
-    actionsChanged({actions, reserve, callbackId}) {
-      var self = this;
-      if (!actions) {
-        return;
+      return obj;
+    })());
+    events.forEach((event) => {
+      let existing = $listeners[event];
+      let eventHandler = [];
+      if (existing) {
+        eventHandler.push(withWebEvent(($event) => {
+          trigger(event.replace("on", "").toLocaleLowerCase(), Object.assign({}, (() => {
+            let obj = {};
+            for (const key in $event) {
+              obj[key] = $event[key];
+            }
+            return obj;
+          })(), {
+            touches: processTouches($event.currentTarget, $event.touches),
+            changedTouches: processTouches($event.currentTarget, $event.changedTouches)
+          }));
+        }));
       }
-      if (this.actionsWaiting) {
-        this._actionsDefer.push([actions, reserve, callbackId]);
-        return;
+      if (props2.disableScroll && event === "onTouchmove") {
+        eventHandler.push(onEventPrevent);
       }
-      var canvas = this.canvas;
-      var c2d = canvas.getContext("2d");
-      if (!reserve) {
-        c2d.fillStyle = "#000000";
-        c2d.strokeStyle = "#000000";
-        c2d.shadowColor = "#000000";
-        c2d.shadowBlur = 0;
-        c2d.shadowOffsetX = 0;
-        c2d.shadowOffsetY = 0;
-        c2d.setTransform(1, 0, 0, 1, 0, 0);
-        c2d.clearRect(0, 0, canvas.width, canvas.height);
-      }
-      this.preloadImage(actions);
-      for (let index2 = 0; index2 < actions.length; index2++) {
-        const action = actions[index2];
-        let method = action.method;
-        const data = action.data;
-        if (/^set/.test(method) && method !== "setTransform") {
-          const method1 = method[3].toLowerCase() + method.slice(4);
-          let color;
-          if (method1 === "fillStyle" || method1 === "strokeStyle") {
-            if (data[0] === "normal") {
-              color = resolveColor(data[1]);
-            } else if (data[0] === "linear") {
-              const LinearGradient = c2d.createLinearGradient(...data[1]);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color2 = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color2);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "radial") {
-              const x = data[1][0];
-              const y = data[1][1];
-              const r = data[1][2];
-              const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color2 = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color2);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "pattern") {
-              const loaded = this.checkImageLoaded(data[1], actions.slice(index2 + 1), callbackId, function(image) {
-                if (image) {
-                  c2d[method1] = c2d.createPattern(image, data[2]);
-                }
-              });
-              if (!loaded) {
-                break;
+      $listeners[event] = eventHandler;
+    });
+    return $listeners;
+  });
+  return {
+    _listeners
+  };
+}
+function useMethods(canvasRef, actionsWaiting) {
+  let _actionsDefer = [];
+  let _images = {};
+  function _resize() {
+    var canvas = canvasRef.value;
+    if (canvas.width > 0 && canvas.height > 0) {
+      var context = canvas.getContext("2d");
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      wrapper(canvas);
+      context.putImageData(imageData, 0, 0);
+    } else {
+      wrapper(canvas);
+    }
+  }
+  function actionsChanged({
+    actions,
+    reserve,
+    callbackId
+  }) {
+    if (!actions) {
+      return;
+    }
+    if (actionsWaiting.value) {
+      _actionsDefer.push([actions, reserve, callbackId]);
+      return;
+    }
+    var canvas = canvasRef.value;
+    var c2d = canvas.getContext("2d");
+    if (!reserve) {
+      c2d.fillStyle = "#000000";
+      c2d.strokeStyle = "#000000";
+      c2d.shadowColor = "#000000";
+      c2d.shadowBlur = 0;
+      c2d.shadowOffsetX = 0;
+      c2d.shadowOffsetY = 0;
+      c2d.setTransform(1, 0, 0, 1, 0, 0);
+      c2d.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    preloadImage(actions);
+    for (let index2 = 0; index2 < actions.length; index2++) {
+      const action = actions[index2];
+      let method = action.method;
+      const data = action.data;
+      if (/^set/.test(method) && method !== "setTransform") {
+        const method1 = method[3].toLowerCase() + method.slice(4);
+        let color;
+        if (method1 === "fillStyle" || method1 === "strokeStyle") {
+          if (data[0] === "normal") {
+            color = resolveColor(data[1]);
+          } else if (data[0] === "linear") {
+            const LinearGradient = c2d.createLinearGradient(...data[1]);
+            data[2].forEach(function(data2) {
+              const offset = data2[0];
+              const color2 = resolveColor(data2[1]);
+              LinearGradient.addColorStop(offset, color2);
+            });
+            color = LinearGradient;
+          } else if (data[0] === "radial") {
+            const x = data[1][0];
+            const y = data[1][1];
+            const r = data[1][2];
+            const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r);
+            data[2].forEach(function(data2) {
+              const offset = data2[0];
+              const color2 = resolveColor(data2[1]);
+              LinearGradient.addColorStop(offset, color2);
+            });
+            color = LinearGradient;
+          } else if (data[0] === "pattern") {
+            const loaded = checkImageLoaded(data[1], actions.slice(index2 + 1), callbackId, function(image) {
+              if (image) {
+                c2d[method1] = c2d.createPattern(image, data[2]);
               }
-              continue;
-            }
-            c2d[method1] = color;
-          } else if (method1 === "globalAlpha") {
-            c2d[method1] = data[0] / 255;
-          } else if (method1 === "shadow") {
-            var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
-            data.forEach(function(color_, method_) {
-              c2d[_[method_]] = _[method_] === "shadowColor" ? resolveColor(color_) : color_;
             });
-          } else if (method1 === "fontSize") {
-            const font = c2d.__font__ || c2d.font;
-            c2d.__font__ = c2d.font = font.replace(/\d+\.?\d*px/, data[0] + "px");
-          } else if (method1 === "lineDash") {
-            c2d.setLineDash(data[0]);
-            c2d.lineDashOffset = data[1] || 0;
-          } else if (method1 === "textBaseline") {
-            if (data[0] === "normal") {
-              data[0] = "alphabetic";
+            if (!loaded) {
+              break;
             }
-            c2d[method1] = data[0];
-          } else if (method1 === "font") {
-            c2d.__font__ = c2d.font = data[0];
-          } else {
-            c2d[method1] = data[0];
+            continue;
           }
-        } else if (method === "fillPath" || method === "strokePath") {
-          method = method.replace(/Path/, "");
-          c2d.beginPath();
-          data.forEach(function(data_) {
-            c2d[data_.method].apply(c2d, data_.data);
+          c2d[method1] = color;
+        } else if (method1 === "globalAlpha") {
+          c2d[method1] = Number(data[0]) / 255;
+        } else if (method1 === "shadow") {
+          var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
+          data.forEach(function(color_, method_) {
+            c2d[_[method_]] = _[method_] === "shadowColor" ? resolveColor(color_) : color_;
           });
-          c2d[method]();
-        } else if (method === "fillText") {
-          c2d.fillText.apply(c2d, data);
-        } else if (method === "drawImage") {
-          var A = function() {
-            var dataArray = [...data];
-            var url = dataArray[0];
-            var otherData = dataArray.slice(1);
-            self._images = self._images || {};
-            if (!self.checkImageLoaded(url, actions.slice(index2 + 1), callbackId, function(image) {
-              if (image) {
-                c2d.drawImage.apply(c2d, [image].concat([...otherData.slice(4, 8)], [...otherData.slice(0, 4)]));
-              }
-            }))
-              return "break";
-          }();
-          if (A === "break") {
-            break;
+        } else if (method1 === "fontSize") {
+          const font = c2d.__font__ || c2d.font;
+          c2d.__font__ = c2d.font = font.replace(/\d+\.?\d*px/, data[0] + "px");
+        } else if (method1 === "lineDash") {
+          c2d.setLineDash(data[0]);
+          c2d.lineDashOffset = data[1] || 0;
+        } else if (method1 === "textBaseline") {
+          if (data[0] === "normal") {
+            data[0] = "alphabetic";
           }
+          c2d[method1] = data[0];
+        } else if (method1 === "font") {
+          c2d.__font__ = c2d.font = data[0];
         } else {
-          if (method === "clip") {
-            data.forEach(function(data_) {
-              c2d[data_.method].apply(c2d, data_.data);
-            });
-            c2d.clip();
-          } else {
-            c2d[method].apply(c2d, data);
-          }
+          c2d[method1] = data[0];
         }
-      }
-      if (!this.actionsWaiting && callbackId) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: "drawCanvas:ok"
-          }
-        }, getCurrentPageId());
-      }
-    },
-    preloadImage: function(actions) {
-      var self = this;
-      actions.forEach(function(action) {
-        var method = action.method;
-        var data = action.data;
-        var src = "";
-        if (method === "drawImage") {
-          src = data[0];
-          src = $getRealPath(src);
-          data[0] = src;
-        } else if (method === "setFillStyle" && data[0] === "pattern") {
-          src = data[1];
-          src = $getRealPath(src);
-          data[1] = src;
-        }
-        if (src && !self._images[src]) {
-          loadImage();
+      } else if (method === "fillPath" || method === "strokePath") {
+        method = method.replace(/Path/, "");
+        c2d.beginPath();
+        data.forEach(function(data_) {
+          c2d[data_.method].apply(c2d, data_.data);
+        });
+        c2d[method]();
+      } else if (method === "fillText") {
+        c2d.fillText.apply(c2d, data);
+      } else if (method === "drawImage") {
+        var A = function() {
+          var dataArray = [...data];
+          var url = dataArray[0];
+          var otherData = dataArray.slice(1);
+          _images = _images || {};
+          if (checkImageLoaded(url, actions.slice(index2 + 1), callbackId, function(image) {
+            if (image) {
+              c2d.drawImage.apply(c2d, [image].concat([...otherData.slice(4, 8)], [...otherData.slice(0, 4)]));
+            }
+          }))
+            return "break";
+        }();
+        if (A === "break") {
+          break;
         }
-        function loadImage() {
-          const image = self._images[src] = new Image();
-          image.onload = function() {
-            image.ready = true;
-          };
-          getSameOriginUrl(src).then((src2) => {
-            image.src = src2;
-          }).catch(() => {
-            image.src = src;
+      } else {
+        if (method === "clip") {
+          data.forEach(function(data_) {
+            c2d[data_.method].apply(c2d, data_.data);
           });
+          c2d.clip();
+        } else {
+          c2d[method].apply(c2d, data);
         }
-      });
-    },
-    checkImageLoaded: function(src, actions, callbackId, fn) {
-      var self = this;
-      var image = this._images[src];
-      if (image.ready) {
-        fn(image);
-        return true;
-      } else {
-        this._actionsDefer.unshift([actions, true]);
-        this.actionsWaiting = true;
+      }
+    }
+    if (!actionsWaiting.value && callbackId) {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg: "drawCanvas:ok"
+        }
+      }, getCurrentPageId());
+    }
+  }
+  function preloadImage(actions) {
+    actions.forEach(function(action) {
+      var method = action.method;
+      var data = action.data;
+      var src = "";
+      if (method === "drawImage") {
+        src = data[0];
+        src = $getRealPath(src);
+        data[0] = src;
+      } else if (method === "setFillStyle" && data[0] === "pattern") {
+        src = data[1];
+        src = $getRealPath(src);
+        data[1] = src;
+      }
+      if (src && !_images[src]) {
+        loadImage();
+      }
+      function loadImage() {
+        const image = _images[src] = new Image();
         image.onload = function() {
           image.ready = true;
-          fn(image);
-          self.actionsWaiting = false;
-          var actions2 = self._actionsDefer.slice(0);
-          self._actionsDefer = [];
-          for (var action = actions2.shift(); action; ) {
-            self.actionsChanged({
-              actions: action[0],
-              reserve: action[1],
-              callbackId
-            });
-            action = actions2.shift();
-          }
         };
-        return false;
+        getSameOriginUrl(src).then((src2) => {
+          image.src = src2;
+        }).catch(() => {
+          image.src = src;
+        });
       }
-    },
-    getImageData({
-      x = 0,
-      y = 0,
-      width,
-      height,
-      destWidth,
-      destHeight,
-      hidpi = true,
-      dataType: dataType2,
-      quality = 1,
-      type = "png",
-      callbackId
-    }) {
-      const canvas = this.canvas;
-      let data;
-      const maxWidth = canvas.offsetWidth - x;
-      width = width ? Math.min(width, maxWidth) : maxWidth;
-      const maxHeight = canvas.offsetHeight - y;
-      height = height ? Math.min(height, maxHeight) : maxHeight;
-      if (!hidpi) {
-        if (!destWidth && !destHeight) {
-          destWidth = Math.round(width * pixelRatio);
-          destHeight = Math.round(height * pixelRatio);
-        } else if (!destWidth) {
-          destWidth = Math.round(width / height * destHeight);
-        } else if (!destHeight) {
-          destHeight = Math.round(height / width * destWidth);
-        }
-      } else {
-        destWidth = width;
-        destHeight = height;
-      }
-      const newCanvas = getTempCanvas(destWidth, destHeight);
-      const context = newCanvas.getContext("2d");
-      if (type === "jpeg" || type === "jpg") {
-        type = "jpeg";
-        context.fillStyle = "#fff";
-        context.fillRect(0, 0, destWidth, destHeight);
-      }
-      context.__hidpi__ = true;
-      context.drawImageByCanvas(canvas, x, y, width, height, 0, 0, destWidth, destHeight, false);
-      let result;
-      try {
-        let compressed;
-        if (dataType2 === "base64") {
-          data = newCanvas.toDataURL(`image/${type}`, quality);
-        } else {
-          const imgData = context.getImageData(0, 0, destWidth, destHeight);
-          if (false)
-            ;
-          else {
-            data = Array.prototype.slice.call(imgData.data);
-          }
+    });
+  }
+  function checkImageLoaded(src, actions, callbackId, fn) {
+    var image = _images[src];
+    if (image.ready) {
+      fn(image);
+      return true;
+    } else {
+      _actionsDefer.unshift([actions, true]);
+      actionsWaiting.value = true;
+      image.onload = function() {
+        image.ready = true;
+        fn(image);
+        actionsWaiting.value = false;
+        var actions2 = _actionsDefer.slice(0);
+        _actionsDefer = [];
+        for (var action = actions2.shift(); action; ) {
+          actionsChanged({
+            actions: action[0],
+            reserve: action[1],
+            callbackId
+          });
+          action = actions2.shift();
         }
-        result = {
-          errMsg: "canvasGetImageData:ok",
-          data,
-          compressed,
-          width: destWidth,
-          height: destHeight
-        };
-      } catch (error) {
-        result = {
-          errMsg: `canvasGetImageData:fail ${error}`
-        };
+      };
+      return false;
+    }
+  }
+  function getImageData({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    hidpi = true,
+    dataType: dataType2,
+    quality = 1,
+    type = "png",
+    callbackId
+  }) {
+    const canvas = canvasRef.value;
+    let data;
+    const maxWidth = canvas.offsetWidth - x;
+    width = width ? Math.min(width, maxWidth) : maxWidth;
+    const maxHeight = canvas.offsetHeight - y;
+    height = height ? Math.min(height, maxHeight) : maxHeight;
+    if (!hidpi) {
+      if (!destWidth && !destHeight) {
+        destWidth = Math.round(width * pixelRatio);
+        destHeight = Math.round(height * pixelRatio);
+      } else if (!destWidth) {
+        destWidth = Math.round(width / height * destHeight);
+      } else if (!destHeight) {
+        destHeight = Math.round(height / width * destWidth);
       }
-      newCanvas.height = newCanvas.width = 0;
-      context.__hidpi__ = false;
-      if (!callbackId) {
-        return result;
+    } else {
+      destWidth = width;
+      destHeight = height;
+    }
+    const newCanvas = getTempCanvas(destWidth, destHeight);
+    const context = newCanvas.getContext("2d");
+    if (type === "jpeg" || type === "jpg") {
+      type = "jpeg";
+      context.fillStyle = "#fff";
+      context.fillRect(0, 0, destWidth, destHeight);
+    }
+    context.__hidpi__ = true;
+    context.drawImageByCanvas(canvas, x, y, width, height, 0, 0, destWidth, destHeight, false);
+    let result;
+    try {
+      let compressed;
+      if (dataType2 === "base64") {
+        data = newCanvas.toDataURL(`image/${type}`, quality);
       } else {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: result
-        }, getCurrentPageId());
-      }
-    },
-    putImageData({data, x, y, width, height, compressed, callbackId}) {
-      try {
-        if (!height) {
-          height = Math.round(data.length / 4 / width);
-        }
-        const canvas = getTempCanvas(width, height);
-        const context = canvas.getContext("2d");
+        const imgData = context.getImageData(0, 0, destWidth, destHeight);
         if (false)
           ;
-        context.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
-        this.canvas.getContext("2d").drawImage(canvas, x, y, width, height);
-        canvas.height = canvas.width = 0;
-      } catch (error) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: "canvasPutImageData:fail"
-          }
-        }, getCurrentPageId());
-        return;
+        else {
+          data = Array.prototype.slice.call(imgData.data);
+        }
       }
+      result = {
+        errMsg: "canvasGetImageData:ok",
+        data,
+        compressed,
+        width: destWidth,
+        height: destHeight
+      };
+    } catch (error) {
+      result = {
+        errMsg: `canvasGetImageData:fail ${error}`
+      };
+    }
+    newCanvas.height = newCanvas.width = 0;
+    context.__hidpi__ = false;
+    if (!callbackId) {
+      return result;
+    } else {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: result
+      }, getCurrentPageId());
+    }
+  }
+  function putImageData({
+    data,
+    x,
+    y,
+    width,
+    height,
+    compressed,
+    callbackId
+  }) {
+    try {
+      if (!height) {
+        height = Math.round(data.length / 4 / width);
+      }
+      const canvas = getTempCanvas(width, height);
+      const context = canvas.getContext("2d");
+      if (false)
+        ;
+      context.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
+      canvasRef.value.getContext("2d").drawImage(canvas, x, y, width, height);
+      canvas.height = canvas.width = 0;
+    } catch (error) {
       UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
         callbackId,
         data: {
-          errMsg: "canvasPutImageData:ok"
+          errMsg: "canvasPutImageData:fail"
         }
       }, getCurrentPageId());
-    },
-    toTempFilePath({
-      x = 0,
-      y = 0,
+      return;
+    }
+    UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+      callbackId,
+      data: {
+        errMsg: "canvasPutImageData:ok"
+      }
+    }, getCurrentPageId());
+  }
+  function toTempFilePath({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    fileType,
+    quality,
+    dirname,
+    callbackId
+  }) {
+    const res = getImageData({
+      x,
+      y,
       width,
       height,
       destWidth,
       destHeight,
-      fileType,
-      quality,
-      dirname,
-      callbackId
-    }) {
-      const res = this.getImageData({
-        x,
-        y,
-        width,
-        height,
-        destWidth,
-        destHeight,
-        hidpi: false,
-        dataType: "base64",
-        type: fileType,
-        quality
-      });
-      if (!res.data || !res.data.length) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: res.errMsg.replace("canvasPutImageData", "toTempFilePath")
-          }
-        }, getCurrentPageId());
-        return;
-      }
-      saveImage(res.data, dirname, (error, tempFilePath) => {
-        let errMsg = `toTempFilePath:${error ? "fail" : "ok"}`;
-        if (error) {
-          errMsg += ` ${error.message}`;
+      hidpi: false,
+      dataType: "base64",
+      type: fileType,
+      quality
+    });
+    if (!res.data || !res.data.length) {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg: res.errMsg.replace("canvasPutImageData", "toTempFilePath")
         }
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg,
-            tempFilePath
-          }
-        }, getCurrentPageId());
-      });
+      }, getCurrentPageId());
+      return;
     }
-  },
-  setup() {
-    const canvas = vue.ref(null);
-    const sensor = vue.ref(null);
-    const {
-      $attrs: Attrs,
-      $excludeAttrs: ExcludeAttrs,
-      $listeners: Listeners
-    } = useAttrs({
-      excludeListeners: true
+    saveImage(res.data, dirname, (error, tempFilePath) => {
+      let errMsg = `toTempFilePath:${error ? "fail" : "ok"}`;
+      if (error) {
+        errMsg += ` ${error.message}`;
+      }
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg,
+          tempFilePath
+        }
+      }, getCurrentPageId());
     });
-    return {
-      canvas,
-      sensor,
-      Attrs,
-      ExcludeAttrs,
-      Listeners
-    };
   }
-};
-const _hoisted_1$3 = {
-  class: "uni-canvas-canvas",
-  ref: "canvas",
-  width: "300",
-  height: "150"
-};
-const _hoisted_2$2 = {style: {"position": "absolute", "top": "0", "left": "0", "width": "100%", "height": "100%", "overflow": "hidden"}};
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ResizeSensor = vue.resolveComponent("ResizeSensor");
-  return vue.openBlock(), vue.createBlock("uni-canvas", vue.mergeProps({
-    "canvas-id": $props.canvasId,
-    "disable-scroll": $props.disableScroll
-  }, __spreadValues(__spreadValues({}, $setup.Attrs), $setup.ExcludeAttrs), vue.toHandlers($options._listeners)), [
-    vue.createVNode("canvas", _hoisted_1$3, null, 512),
-    vue.createVNode("div", _hoisted_2$2, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ]),
-    vue.createVNode(_component_ResizeSensor, {
-      ref: "sensor",
-      onResize: $options._resize
-    }, null, 8, ["onResize"])
-  ], 16, ["canvas-id", "disable-scroll"]);
+  const methods = {
+    actionsChanged,
+    getImageData,
+    putImageData,
+    toTempFilePath
+  };
+  function _handleSubscribe(type, data = {}) {
+    let method = methods[type];
+    if (type.indexOf("_") !== 0 && typeof method === "function") {
+      method(data);
+    }
+  }
+  return shared.extend(methods, {
+    _resize,
+    _handleSubscribe
+  });
 }
-_sfc_main$4.render = _sfc_render$4;
 const uniCheckGroupKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniCheckGroup" : "ucg");
 const props$q = {
   name: {
@@ -7279,12 +7269,12 @@ function useSubscribe(callback, name, multiple) {
 function useOn(name, callback) {
 }
 let index$9 = 0;
-function useContextInfo() {
+function useContextInfo(_id) {
   const page = useCurrentPageId();
   const instance = vue.getCurrentInstance();
   const vm = instance.proxy;
   const type = vm.$options.name.toLowerCase();
-  const id = vm.id || `context${index$9++}`;
+  const id = _id || vm.id || `context${index$9++}`;
   return `${page}.${type}.${id}`;
 }
 function getContextInfo(el) {
@@ -11336,20 +11326,20 @@ var index = /* @__PURE__ */ defineSystemComponent({
 });
 exports.AsyncErrorComponent = index$1;
 exports.AsyncLoadingComponent = index;
-exports.Audio = _sfc_main$5;
-exports.Button = index$s;
-exports.Canvas = _sfc_main$4;
+exports.Audio = _sfc_main$4;
+exports.Button = index$t;
+exports.Canvas = index$s;
 exports.Checkbox = index$q;
 exports.CheckboxGroup = index$r;
 exports.CoverImage = index$3;
 exports.CoverView = index$4;
 exports.Editor = index$p;
-exports.Form = index$u;
+exports.Form = index$v;
 exports.Friction = Friction;
 exports.Icon = index$o;
 exports.Image = index$n;
 exports.Input = Input;
-exports.Label = index$t;
+exports.Label = index$u;
 exports.LayoutComponent = LayoutComponent;
 exports.Map = index$5;
 exports.MovableArea = index$m;

packages/uni-h5/dist/uni-h5.es.js

 import {isFunction, extend, hyphenate, isPlainObject, isString, isArray, hasOwn, isObject, capitalize, toRawType, makeMap as makeMap$1, isPromise, invokeArrayFns as invokeArrayFns$1} from "@vue/shared";
-import {injectHook, withModifiers, createVNode, getCurrentInstance, inject, provide, reactive, openBlock, createBlock, mergeProps, toDisplayString, defineComponent, ref, computed, watch, onUnmounted, onBeforeUnmount, onActivated, onMounted, nextTick, resolveComponent, toHandlers, renderSlot, onBeforeMount, withDirectives, vShow, shallowRef, watchEffect, isVNode, Fragment, markRaw, createCommentVNode, createTextVNode, onBeforeActivate, onBeforeDeactivate, renderList, onDeactivated, Teleport, createApp, Transition, withCtx, KeepAlive, resolveDynamicComponent} from "vue";
+import {injectHook, withModifiers, createVNode, getCurrentInstance, inject, provide, reactive, openBlock, createBlock, mergeProps, toDisplayString, defineComponent, ref, computed, watch, onUnmounted, onBeforeUnmount, onActivated, onMounted, nextTick, onBeforeMount, withDirectives, vShow, shallowRef, watchEffect, isVNode, Fragment, markRaw, createCommentVNode, renderSlot, createTextVNode, onBeforeActivate, onBeforeDeactivate, renderList, onDeactivated, Teleport, createApp, Transition, resolveComponent, withCtx, KeepAlive, resolveDynamicComponent} from "vue";
 import {once, passive, normalizeTarget, isBuiltInComponent, initCostomDataset, invokeArrayFns, NAVBAR_HEIGHT, parseQuery, PRIMARY_COLOR, debounce, getCostomDataset, callOptions, removeLeadingSlash, getLen, ON_REACH_BOTTOM_DISTANCE, decodedQuery, updateElementStyle, addFont, scrollTo, formatDateTime} from "@dcloudio/uni-shared";
 import {initVueI18n, LOCALE_EN, LOCALE_ES, LOCALE_FR, LOCALE_ZH_HANS, LOCALE_ZH_HANT} from "@dcloudio/uni-i18n";
 import {useRoute, createRouter, createWebHistory, createWebHashHistory, useRouter, isNavigationFailure, RouterView} from "vue-router";
@@ -485,7 +485,7 @@ var safeAreaInsets = {
   onChange,
   offChange
 };
-var out = safeAreaInsets;
+var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
 const onEventPrevent = /* @__PURE__ */ withModifiers(() => {
 }, ["prevent"]);
 const onEventStop = /* @__PURE__ */ withModifiers(() => {
@@ -497,10 +497,10 @@ function getWindowOffset() {
   const left = parseInt(style.getPropertyValue("--window-left"));
   const right = parseInt(style.getPropertyValue("--window-right"));
   return {
-    top: top ? top + out.top : 0,
-    bottom: bottom ? bottom + out.bottom : 0,
-    left: left ? left + out.left : 0,
-    right: right ? right + out.right : 0
+    top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0,
+    bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0,
+    left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0,
+    right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0
   };
 }
 function updateCssVar(cssVars) {
@@ -1194,7 +1194,7 @@ function normalizePageMeta(pageMeta) {
       let offset = rpx2px(refreshOptions.offset);
       const {type} = navigationBar;
       if (type !== "transparent" && type !== "none") {
-        offset += NAVBAR_HEIGHT + out.top;
+        offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
       }
       refreshOptions.offset = offset;
       refreshOptions.height = rpx2px(refreshOptions.height);
@@ -1828,7 +1828,7 @@ function throttle(fn, wait) {
   };
   return newFn;
 }
-const _sfc_main$5 = {
+const _sfc_main$4 = {
   name: "Audio",
   mixins: [subscriber],
   props: {
@@ -1947,13 +1947,13 @@ const _sfc_main$5 = {
     }
   }
 };
-const _hoisted_1$4 = {class: "uni-audio-default"};
-const _hoisted_2$3 = {class: "uni-audio-right"};
+const _hoisted_1$3 = {class: "uni-audio-default"};
+const _hoisted_2$2 = {class: "uni-audio-right"};
 const _hoisted_3$2 = {class: "uni-audio-time"};
 const _hoisted_4$2 = {class: "uni-audio-info"};
 const _hoisted_5$1 = {class: "uni-audio-name"};
 const _hoisted_6$1 = {class: "uni-audio-author"};
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock("uni-audio", mergeProps({
     id: $props.id,
     controls: !!$props.controls
@@ -1963,7 +1963,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       loop: $props.loop,
       style: {"display": "none"}
     }, null, 8, ["loop"]),
-    createVNode("div", _hoisted_1$4, [
+    createVNode("div", _hoisted_1$3, [
       createVNode("div", {
         style: "background-image: url(" + _ctx.$getRealPath($props.poster) + ");",
         class: "uni-audio-left"
@@ -1973,7 +1973,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[1] || (_cache[1] = (...args) => $options.trigger && $options.trigger(...args))
         }, null, 2)
       ], 4),
-      createVNode("div", _hoisted_2$3, [
+      createVNode("div", _hoisted_2$2, [
         createVNode("div", _hoisted_3$2, toDisplayString($data.currentTime), 1),
         createVNode("div", _hoisted_4$2, [
           createVNode("div", _hoisted_5$1, toDisplayString($props.name), 1),
@@ -1983,7 +1983,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 16, ["id", "controls"]);
 }
-_sfc_main$5.render = _sfc_render$5;
+_sfc_main$4.render = _sfc_render$4;
 function converPx(value) {
   if (/^-?\d+[ur]px$/i.test(value)) {
     return value.replace(/(^-?\d+)[ur]px$/i, (text2, num) => {
@@ -2215,7 +2215,7 @@ function normalizeCustomEvent(name, domEvt, el, detail) {
   };
 }
 const uniFormKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniForm" : "uf");
-var index$r = /* @__PURE__ */ defineBuiltInComponent({
+var index$s = /* @__PURE__ */ defineBuiltInComponent({
   name: "Form",
   setup(_props, {
     slots,
@@ -2255,15 +2255,15 @@ function provideForm(emit2) {
   return fields2;
 }
 const uniLabelKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniLabel" : "ul");
-const props$y = {
+const props$z = {
   for: {
     type: String,
     default: ""
   }
 };
-var index$q = /* @__PURE__ */ defineBuiltInComponent({
+var index$r = /* @__PURE__ */ defineBuiltInComponent({
   name: "Label",
-  props: props$y,
+  props: props$z,
   setup(props2, {
     slots
   }) {
@@ -2305,7 +2305,7 @@ function useProvideLabel() {
   });
   return handlers;
 }
-function useListeners(props2, listeners) {
+function useListeners$1(props2, listeners) {
   _addListeners(props2.id, listeners);
   watch(() => props2.id, (newId, oldId) => {
     _removeListeners(oldId, listeners, true);
@@ -2359,7 +2359,7 @@ function _removeListeners(id2, listeners, watch2) {
     }
   });
 }
-var index$p = /* @__PURE__ */ defineBuiltInComponent({
+var index$q = /* @__PURE__ */ defineBuiltInComponent({
   name: "Button",
   props: {
     id: {
@@ -2436,7 +2436,7 @@ var index$p = /* @__PURE__ */ defineBuiltInComponent({
         uniLabel.removeHandler(onClick);
       });
     }
-    useListeners(props2, {
+    useListeners$1(props2, {
       "label-click": onClick
     });
     return () => {
@@ -2666,8 +2666,9 @@ function resolveColor(color) {
   return "rgba(" + color.join(",") + ")";
 }
 function processTouches(target, touches) {
-  return [].map.call(touches, (touch) => {
-    var boundingClientRect = target.getBoundingClientRect();
+  const eventTarget = target;
+  return Array.from(touches).map((touch) => {
+    let boundingClientRect = eventTarget.getBoundingClientRect();
     return {
       identifier: touch.identifier,
       x: touch.clientX - boundingClientRect.left,
@@ -2675,7 +2676,7 @@ function processTouches(target, touches) {
     };
   });
 }
-var tempCanvas;
+let tempCanvas;
 function getTempCanvas(width = 0, height = 0) {
   if (!tempCanvas) {
     tempCanvas = document.createElement("canvas");
@@ -2684,492 +2685,500 @@ function getTempCanvas(width = 0, height = 0) {
   tempCanvas.height = height;
   return tempCanvas;
 }
-var _sfc_main$4 = {
-  name: "Canvas",
+const props$y = {
+  canvasId: {
+    type: String,
+    default: ""
+  },
+  disableScroll: {
+    type: [Boolean, String],
+    default: false
+  }
+};
+var index$p = /* @__PURE__ */ defineBuiltInComponent({
   inheritAttrs: false,
+  name: "Canvas",
   compatConfig: {
     MODE: 3
   },
-  components: {
-    ResizeSensor
-  },
-  props: {
-    canvasId: {
-      type: String,
-      default: ""
-    },
-    disableScroll: {
-      type: [Boolean, String],
-      default: false
-    }
-  },
-  data() {
-    return {
-      actionsWaiting: false
-    };
-  },
+  props: props$y,
   computed: {
     id() {
       return this.canvasId;
-    },
-    _listeners() {
-      let events = ["touchstart", "touchmove", "touchend"];
-      let _$listeners = this.Listeners;
-      let $listeners = Object.assign({}, (() => {
-        let obj = {};
-        for (const key in _$listeners) {
-          if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
-            const event = _$listeners[key];
-            obj[key.replace("on", "").toLowerCase()] = event;
-          }
-        }
-        return obj;
-      })());
-      events.forEach((event) => {
-        let existing = $listeners[event];
-        let eventHandler = [];
-        if (existing) {
-          eventHandler.push(withWebEvent(($event) => {
-            this.$trigger(event, Object.assign({}, (() => {
-              let obj = {};
-              for (const key in $event) {
-                obj[key] = $event[key];
-              }
-              return obj;
-            })(), {
-              touches: processTouches($event.currentTarget, $event.touches),
-              changedTouches: processTouches($event.currentTarget, $event.changedTouches)
-            }));
-          }));
-        }
-        if (this.disableScroll && event === "touchmove") {
-          eventHandler.push(onEventPrevent);
-        }
-        $listeners[event] = eventHandler;
-      });
-      return $listeners;
     }
   },
-  created() {
-    this._actionsDefer = [];
-    this._images = {};
-    const id2 = useContextInfo();
-    useSubscribe(this._handleSubscribe, id2, true);
-  },
-  beforeMount() {
+  setup(props2, {
+    emit: emit2,
+    slots
+  }) {
     initHidpiOnce();
-  },
-  mounted() {
-    this.$trigger = useNativeEvent(this.$emit);
-    this._resize();
-  },
-  beforeUnmount() {
-    const canvas = this.canvas;
-    canvas.height = canvas.width = 0;
-  },
-  methods: {
-    _handleSubscribe(type, data = {}) {
-      var method = this[type];
-      if (type.indexOf("_") !== 0 && typeof method === "function") {
-        method(data);
-      }
-    },
-    _resize() {
-      var canvas = this.canvas;
-      if (canvas.width > 0 && canvas.height > 0) {
-        var context = canvas.getContext("2d");
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        wrapper(canvas);
-        context.putImageData(imageData, 0, 0);
-      } else {
-        wrapper(canvas);
+    const canvas = ref(null);
+    const sensor = ref(null);
+    const actionsWaiting = ref(false);
+    const trigger = useNativeEvent(emit2);
+    const {
+      $attrs,
+      $excludeAttrs,
+      $listeners
+    } = useAttrs({
+      excludeListeners: true
+    });
+    const {
+      _listeners
+    } = useListeners(props2, $listeners, trigger);
+    const {
+      _handleSubscribe,
+      _resize
+    } = useMethods(canvas, actionsWaiting);
+    useSubscribe(_handleSubscribe, useContextInfo(props2.canvasId), true);
+    onMounted(() => {
+      _resize();
+    });
+    return () => {
+      const {
+        canvasId,
+        disableScroll
+      } = props2;
+      return createVNode("uni-canvas", mergeProps({
+        "canvas-id": canvasId,
+        "disable-scroll": disableScroll
+      }, $attrs.value, $excludeAttrs.value, _listeners.value), [createVNode("canvas", {
+        "ref": canvas,
+        "class": "uni-canvas-canvas",
+        "width": "300",
+        "height": "150"
+      }, null, 512), createVNode("div", {
+        "style": "position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;"
+      }, [slots.default && slots.default()]), createVNode(ResizeSensor, {
+        "ref": sensor,
+        "onResize": _resize
+      }, null, 8, ["onResize"])], 16, ["canvas-id", "disable-scroll"]);
+    };
+  }
+});
+function useListeners(props2, Listeners, trigger) {
+  const _listeners = computed(() => {
+    let events = ["onTouchstart", "onTouchmove", "onTouchend"];
+    let _$listeners = Listeners.value;
+    let $listeners = Object.assign({}, (() => {
+      let obj = {};
+      for (const key in _$listeners) {
+        if (Object.prototype.hasOwnProperty.call(_$listeners, key)) {
+          const event = _$listeners[key];
+          obj[key] = event;
+        }
       }
-    },
-    actionsChanged({actions, reserve, callbackId}) {
-      var self = this;
-      if (!actions) {
-        return;
+      return obj;
+    })());
+    events.forEach((event) => {
+      let existing = $listeners[event];
+      let eventHandler = [];
+      if (existing) {
+        eventHandler.push(withWebEvent(($event) => {
+          trigger(event.replace("on", "").toLocaleLowerCase(), Object.assign({}, (() => {
+            let obj = {};
+            for (const key in $event) {
+              obj[key] = $event[key];
+            }
+            return obj;
+          })(), {
+            touches: processTouches($event.currentTarget, $event.touches),
+            changedTouches: processTouches($event.currentTarget, $event.changedTouches)
+          }));
+        }));
       }
-      if (this.actionsWaiting) {
-        this._actionsDefer.push([actions, reserve, callbackId]);
-        return;
+      if (props2.disableScroll && event === "onTouchmove") {
+        eventHandler.push(onEventPrevent);
       }
-      var canvas = this.canvas;
-      var c2d = canvas.getContext("2d");
-      if (!reserve) {
-        c2d.fillStyle = "#000000";
-        c2d.strokeStyle = "#000000";
-        c2d.shadowColor = "#000000";
-        c2d.shadowBlur = 0;
-        c2d.shadowOffsetX = 0;
-        c2d.shadowOffsetY = 0;
-        c2d.setTransform(1, 0, 0, 1, 0, 0);
-        c2d.clearRect(0, 0, canvas.width, canvas.height);
-      }
-      this.preloadImage(actions);
-      for (let index2 = 0; index2 < actions.length; index2++) {
-        const action = actions[index2];
-        let method = action.method;
-        const data = action.data;
-        if (/^set/.test(method) && method !== "setTransform") {
-          const method1 = method[3].toLowerCase() + method.slice(4);
-          let color;
-          if (method1 === "fillStyle" || method1 === "strokeStyle") {
-            if (data[0] === "normal") {
-              color = resolveColor(data[1]);
-            } else if (data[0] === "linear") {
-              const LinearGradient = c2d.createLinearGradient(...data[1]);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color2 = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color2);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "radial") {
-              const x = data[1][0];
-              const y = data[1][1];
-              const r = data[1][2];
-              const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r);
-              data[2].forEach(function(data2) {
-                const offset = data2[0];
-                const color2 = resolveColor(data2[1]);
-                LinearGradient.addColorStop(offset, color2);
-              });
-              color = LinearGradient;
-            } else if (data[0] === "pattern") {
-              const loaded = this.checkImageLoaded(data[1], actions.slice(index2 + 1), callbackId, function(image2) {
-                if (image2) {
-                  c2d[method1] = c2d.createPattern(image2, data[2]);
-                }
-              });
-              if (!loaded) {
-                break;
+      $listeners[event] = eventHandler;
+    });
+    return $listeners;
+  });
+  return {
+    _listeners
+  };
+}
+function useMethods(canvasRef, actionsWaiting) {
+  let _actionsDefer = [];
+  let _images = {};
+  function _resize() {
+    var canvas = canvasRef.value;
+    if (canvas.width > 0 && canvas.height > 0) {
+      var context = canvas.getContext("2d");
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      wrapper(canvas);
+      context.putImageData(imageData, 0, 0);
+    } else {
+      wrapper(canvas);
+    }
+  }
+  function actionsChanged({
+    actions,
+    reserve,
+    callbackId
+  }) {
+    if (!actions) {
+      return;
+    }
+    if (actionsWaiting.value) {
+      _actionsDefer.push([actions, reserve, callbackId]);
+      return;
+    }
+    var canvas = canvasRef.value;
+    var c2d = canvas.getContext("2d");
+    if (!reserve) {
+      c2d.fillStyle = "#000000";
+      c2d.strokeStyle = "#000000";
+      c2d.shadowColor = "#000000";
+      c2d.shadowBlur = 0;
+      c2d.shadowOffsetX = 0;
+      c2d.shadowOffsetY = 0;
+      c2d.setTransform(1, 0, 0, 1, 0, 0);
+      c2d.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    preloadImage(actions);
+    for (let index2 = 0; index2 < actions.length; index2++) {
+      const action = actions[index2];
+      let method = action.method;
+      const data = action.data;
+      if (/^set/.test(method) && method !== "setTransform") {
+        const method1 = method[3].toLowerCase() + method.slice(4);
+        let color;
+        if (method1 === "fillStyle" || method1 === "strokeStyle") {
+          if (data[0] === "normal") {
+            color = resolveColor(data[1]);
+          } else if (data[0] === "linear") {
+            const LinearGradient = c2d.createLinearGradient(...data[1]);
+            data[2].forEach(function(data2) {
+              const offset = data2[0];
+              const color2 = resolveColor(data2[1]);
+              LinearGradient.addColorStop(offset, color2);
+            });
+            color = LinearGradient;
+          } else if (data[0] === "radial") {
+            const x = data[1][0];
+            const y = data[1][1];
+            const r = data[1][2];
+            const LinearGradient = c2d.createRadialGradient(x, y, 0, x, y, r);
+            data[2].forEach(function(data2) {
+              const offset = data2[0];
+              const color2 = resolveColor(data2[1]);
+              LinearGradient.addColorStop(offset, color2);
+            });
+            color = LinearGradient;
+          } else if (data[0] === "pattern") {
+            const loaded = checkImageLoaded(data[1], actions.slice(index2 + 1), callbackId, function(image2) {
+              if (image2) {
+                c2d[method1] = c2d.createPattern(image2, data[2]);
               }
-              continue;
-            }
-            c2d[method1] = color;
-          } else if (method1 === "globalAlpha") {
-            c2d[method1] = data[0] / 255;
-          } else if (method1 === "shadow") {
-            var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
-            data.forEach(function(color_, method_) {
-              c2d[_[method_]] = _[method_] === "shadowColor" ? resolveColor(color_) : color_;
             });
-          } else if (method1 === "fontSize") {
-            const font2 = c2d.__font__ || c2d.font;
-            c2d.__font__ = c2d.font = font2.replace(/\d+\.?\d*px/, data[0] + "px");
-          } else if (method1 === "lineDash") {
-            c2d.setLineDash(data[0]);
-            c2d.lineDashOffset = data[1] || 0;
-          } else if (method1 === "textBaseline") {
-            if (data[0] === "normal") {
-              data[0] = "alphabetic";
+            if (!loaded) {
+              break;
             }
-            c2d[method1] = data[0];
-          } else if (method1 === "font") {
-            c2d.__font__ = c2d.font = data[0];
-          } else {
-            c2d[method1] = data[0];
+            continue;
           }
-        } else if (method === "fillPath" || method === "strokePath") {
-          method = method.replace(/Path/, "");
-          c2d.beginPath();
-          data.forEach(function(data_) {
-            c2d[data_.method].apply(c2d, data_.data);
+          c2d[method1] = color;
+        } else if (method1 === "globalAlpha") {
+          c2d[method1] = Number(data[0]) / 255;
+        } else if (method1 === "shadow") {
+          var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
+          data.forEach(function(color_, method_) {
+            c2d[_[method_]] = _[method_] === "shadowColor" ? resolveColor(color_) : color_;
           });
-          c2d[method]();
-        } else if (method === "fillText") {
-          c2d.fillText.apply(c2d, data);
-        } else if (method === "drawImage") {
-          var A = function() {
-            var dataArray = [...data];
-            var url = dataArray[0];
-            var otherData = dataArray.slice(1);
-            self._images = self._images || {};
-            if (!self.checkImageLoaded(url, actions.slice(index2 + 1), callbackId, function(image2) {
-              if (image2) {
-                c2d.drawImage.apply(c2d, [image2].concat([...otherData.slice(4, 8)], [...otherData.slice(0, 4)]));
-              }
-            }))
-              return "break";
-          }();
-          if (A === "break") {
-            break;
+        } else if (method1 === "fontSize") {
+          const font2 = c2d.__font__ || c2d.font;
+          c2d.__font__ = c2d.font = font2.replace(/\d+\.?\d*px/, data[0] + "px");
+        } else if (method1 === "lineDash") {
+          c2d.setLineDash(data[0]);
+          c2d.lineDashOffset = data[1] || 0;
+        } else if (method1 === "textBaseline") {
+          if (data[0] === "normal") {
+            data[0] = "alphabetic";
           }
+          c2d[method1] = data[0];
+        } else if (method1 === "font") {
+          c2d.__font__ = c2d.font = data[0];
         } else {
-          if (method === "clip") {
-            data.forEach(function(data_) {
-              c2d[data_.method].apply(c2d, data_.data);
-            });
-            c2d.clip();
-          } else {
-            c2d[method].apply(c2d, data);
-          }
+          c2d[method1] = data[0];
         }
-      }
-      if (!this.actionsWaiting && callbackId) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: "drawCanvas:ok"
-          }
-        }, getCurrentPageId());
-      }
-    },
-    preloadImage: function(actions) {
-      var self = this;
-      actions.forEach(function(action) {
-        var method = action.method;
-        var data = action.data;
-        var src = "";
-        if (method === "drawImage") {
-          src = data[0];
-          src = $getRealPath(src);
-          data[0] = src;
-        } else if (method === "setFillStyle" && data[0] === "pattern") {
-          src = data[1];
-          src = $getRealPath(src);
-          data[1] = src;
-        }
-        if (src && !self._images[src]) {
-          loadImage();
+      } else if (method === "fillPath" || method === "strokePath") {
+        method = method.replace(/Path/, "");
+        c2d.beginPath();
+        data.forEach(function(data_) {
+          c2d[data_.method].apply(c2d, data_.data);
+        });
+        c2d[method]();
+      } else if (method === "fillText") {
+        c2d.fillText.apply(c2d, data);
+      } else if (method === "drawImage") {
+        var A = function() {
+          var dataArray = [...data];
+          var url = dataArray[0];
+          var otherData = dataArray.slice(1);
+          _images = _images || {};
+          if (checkImageLoaded(url, actions.slice(index2 + 1), callbackId, function(image2) {
+            if (image2) {
+              c2d.drawImage.apply(c2d, [image2].concat([...otherData.slice(4, 8)], [...otherData.slice(0, 4)]));
+            }
+          }))
+            return "break";
+        }();
+        if (A === "break") {
+          break;
         }
-        function loadImage() {
-          const image2 = self._images[src] = new Image();
-          image2.onload = function() {
-            image2.ready = true;
-          };
-          getSameOriginUrl(src).then((src2) => {
-            image2.src = src2;
-          }).catch(() => {
-            image2.src = src;
+      } else {
+        if (method === "clip") {
+          data.forEach(function(data_) {
+            c2d[data_.method].apply(c2d, data_.data);
           });
+          c2d.clip();
+        } else {
+          c2d[method].apply(c2d, data);
         }
-      });
-    },
-    checkImageLoaded: function(src, actions, callbackId, fn) {
-      var self = this;
-      var image2 = this._images[src];
-      if (image2.ready) {
-        fn(image2);
-        return true;
-      } else {
-        this._actionsDefer.unshift([actions, true]);
-        this.actionsWaiting = true;
+      }
+    }
+    if (!actionsWaiting.value && callbackId) {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg: "drawCanvas:ok"
+        }
+      }, getCurrentPageId());
+    }
+  }
+  function preloadImage(actions) {
+    actions.forEach(function(action) {
+      var method = action.method;
+      var data = action.data;
+      var src = "";
+      if (method === "drawImage") {
+        src = data[0];
+        src = $getRealPath(src);
+        data[0] = src;
+      } else if (method === "setFillStyle" && data[0] === "pattern") {
+        src = data[1];
+        src = $getRealPath(src);
+        data[1] = src;
+      }
+      if (src && !_images[src]) {
+        loadImage();
+      }
+      function loadImage() {
+        const image2 = _images[src] = new Image();
         image2.onload = function() {
           image2.ready = true;
-          fn(image2);
-          self.actionsWaiting = false;
-          var actions2 = self._actionsDefer.slice(0);
-          self._actionsDefer = [];
-          for (var action = actions2.shift(); action; ) {
-            self.actionsChanged({
-              actions: action[0],
-              reserve: action[1],
-              callbackId
-            });
-            action = actions2.shift();
-          }
         };
-        return false;
+        getSameOriginUrl(src).then((src2) => {
+          image2.src = src2;
+        }).catch(() => {
+          image2.src = src;
+        });
       }
-    },
-    getImageData({
-      x = 0,
-      y = 0,
-      width,
-      height,
-      destWidth,
-      destHeight,
-      hidpi = true,
-      dataType: dataType2,
-      quality = 1,
-      type = "png",
-      callbackId
-    }) {
-      const canvas = this.canvas;
-      let data;
-      const maxWidth = canvas.offsetWidth - x;
-      width = width ? Math.min(width, maxWidth) : maxWidth;
-      const maxHeight = canvas.offsetHeight - y;
-      height = height ? Math.min(height, maxHeight) : maxHeight;
-      if (!hidpi) {
-        if (!destWidth && !destHeight) {
-          destWidth = Math.round(width * pixelRatio);
-          destHeight = Math.round(height * pixelRatio);
-        } else if (!destWidth) {
-          destWidth = Math.round(width / height * destHeight);
-        } else if (!destHeight) {
-          destHeight = Math.round(height / width * destWidth);
-        }
-      } else {
-        destWidth = width;
-        destHeight = height;
-      }
-      const newCanvas = getTempCanvas(destWidth, destHeight);
-      const context = newCanvas.getContext("2d");
-      if (type === "jpeg" || type === "jpg") {
-        type = "jpeg";
-        context.fillStyle = "#fff";
-        context.fillRect(0, 0, destWidth, destHeight);
-      }
-      context.__hidpi__ = true;
-      context.drawImageByCanvas(canvas, x, y, width, height, 0, 0, destWidth, destHeight, false);
-      let result;
-      try {
-        let compressed;
-        if (dataType2 === "base64") {
-          data = newCanvas.toDataURL(`image/${type}`, quality);
-        } else {
-          const imgData = context.getImageData(0, 0, destWidth, destHeight);
-          if (false)
-            ;
-          else {
-            data = Array.prototype.slice.call(imgData.data);
-          }
+    });
+  }
+  function checkImageLoaded(src, actions, callbackId, fn) {
+    var image2 = _images[src];
+    if (image2.ready) {
+      fn(image2);
+      return true;
+    } else {
+      _actionsDefer.unshift([actions, true]);
+      actionsWaiting.value = true;
+      image2.onload = function() {
+        image2.ready = true;
+        fn(image2);
+        actionsWaiting.value = false;
+        var actions2 = _actionsDefer.slice(0);
+        _actionsDefer = [];
+        for (var action = actions2.shift(); action; ) {
+          actionsChanged({
+            actions: action[0],
+            reserve: action[1],
+            callbackId
+          });
+          action = actions2.shift();
         }
-        result = {
-          errMsg: "canvasGetImageData:ok",
-          data,
-          compressed,
-          width: destWidth,
-          height: destHeight
-        };
-      } catch (error) {
-        result = {
-          errMsg: `canvasGetImageData:fail ${error}`
-        };
+      };
+      return false;
+    }
+  }
+  function getImageData({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    hidpi = true,
+    dataType: dataType2,
+    quality = 1,
+    type = "png",
+    callbackId
+  }) {
+    const canvas = canvasRef.value;
+    let data;
+    const maxWidth = canvas.offsetWidth - x;
+    width = width ? Math.min(width, maxWidth) : maxWidth;
+    const maxHeight = canvas.offsetHeight - y;
+    height = height ? Math.min(height, maxHeight) : maxHeight;
+    if (!hidpi) {
+      if (!destWidth && !destHeight) {
+        destWidth = Math.round(width * pixelRatio);
+        destHeight = Math.round(height * pixelRatio);
+      } else if (!destWidth) {
+        destWidth = Math.round(width / height * destHeight);
+      } else if (!destHeight) {
+        destHeight = Math.round(height / width * destWidth);
       }
-      newCanvas.height = newCanvas.width = 0;
-      context.__hidpi__ = false;
-      if (!callbackId) {
-        return result;
+    } else {
+      destWidth = width;
+      destHeight = height;
+    }
+    const newCanvas = getTempCanvas(destWidth, destHeight);
+    const context = newCanvas.getContext("2d");
+    if (type === "jpeg" || type === "jpg") {
+      type = "jpeg";
+      context.fillStyle = "#fff";
+      context.fillRect(0, 0, destWidth, destHeight);
+    }
+    context.__hidpi__ = true;
+    context.drawImageByCanvas(canvas, x, y, width, height, 0, 0, destWidth, destHeight, false);
+    let result;
+    try {
+      let compressed;
+      if (dataType2 === "base64") {
+        data = newCanvas.toDataURL(`image/${type}`, quality);
       } else {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: result
-        }, getCurrentPageId());
-      }
-    },
-    putImageData({data, x, y, width, height, compressed, callbackId}) {
-      try {
-        if (!height) {
-          height = Math.round(data.length / 4 / width);
-        }
-        const canvas = getTempCanvas(width, height);
-        const context = canvas.getContext("2d");
+        const imgData = context.getImageData(0, 0, destWidth, destHeight);
         if (false)
           ;
-        context.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
-        this.canvas.getContext("2d").drawImage(canvas, x, y, width, height);
-        canvas.height = canvas.width = 0;
-      } catch (error) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: "canvasPutImageData:fail"
-          }
-        }, getCurrentPageId());
-        return;
+        else {
+          data = Array.prototype.slice.call(imgData.data);
+        }
+      }
+      result = {
+        errMsg: "canvasGetImageData:ok",
+        data,
+        compressed,
+        width: destWidth,
+        height: destHeight
+      };
+    } catch (error) {
+      result = {
+        errMsg: `canvasGetImageData:fail ${error}`
+      };
+    }
+    newCanvas.height = newCanvas.width = 0;
+    context.__hidpi__ = false;
+    if (!callbackId) {
+      return result;
+    } else {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: result
+      }, getCurrentPageId());
+    }
+  }
+  function putImageData({
+    data,
+    x,
+    y,
+    width,
+    height,
+    compressed,
+    callbackId
+  }) {
+    try {
+      if (!height) {
+        height = Math.round(data.length / 4 / width);
       }
+      const canvas = getTempCanvas(width, height);
+      const context = canvas.getContext("2d");
+      if (false)
+        ;
+      context.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
+      canvasRef.value.getContext("2d").drawImage(canvas, x, y, width, height);
+      canvas.height = canvas.width = 0;
+    } catch (error) {
       UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
         callbackId,
         data: {
-          errMsg: "canvasPutImageData:ok"
+          errMsg: "canvasPutImageData:fail"
         }
       }, getCurrentPageId());
-    },
-    toTempFilePath({
-      x = 0,
-      y = 0,
+      return;
+    }
+    UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+      callbackId,
+      data: {
+        errMsg: "canvasPutImageData:ok"
+      }
+    }, getCurrentPageId());
+  }
+  function toTempFilePath({
+    x = 0,
+    y = 0,
+    width,
+    height,
+    destWidth,
+    destHeight,
+    fileType,
+    quality,
+    dirname,
+    callbackId
+  }) {
+    const res = getImageData({
+      x,
+      y,
       width,
       height,
       destWidth,
       destHeight,
-      fileType,
-      quality,
-      dirname,
-      callbackId
-    }) {
-      const res = this.getImageData({
-        x,
-        y,
-        width,
-        height,
-        destWidth,
-        destHeight,
-        hidpi: false,
-        dataType: "base64",
-        type: fileType,
-        quality
-      });
-      if (!res.data || !res.data.length) {
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg: res.errMsg.replace("canvasPutImageData", "toTempFilePath")
-          }
-        }, getCurrentPageId());
-        return;
-      }
-      saveImage(res.data, dirname, (error, tempFilePath) => {
-        let errMsg = `toTempFilePath:${error ? "fail" : "ok"}`;
-        if (error) {
-          errMsg += ` ${error.message}`;
+      hidpi: false,
+      dataType: "base64",
+      type: fileType,
+      quality
+    });
+    if (!res.data || !res.data.length) {
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg: res.errMsg.replace("canvasPutImageData", "toTempFilePath")
         }
-        UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
-          callbackId,
-          data: {
-            errMsg,
-            tempFilePath
-          }
-        }, getCurrentPageId());
-      });
+      }, getCurrentPageId());
+      return;
     }
-  },
-  setup() {
-    const canvas = ref(null);
-    const sensor = ref(null);
-    const {
-      $attrs: Attrs,
-      $excludeAttrs: ExcludeAttrs,
-      $listeners: Listeners
-    } = useAttrs({
-      excludeListeners: true
+    saveImage(res.data, dirname, (error, tempFilePath) => {
+      let errMsg = `toTempFilePath:${error ? "fail" : "ok"}`;
+      if (error) {
+        errMsg += ` ${error.message}`;
+      }
+      UniViewJSBridge.publishHandler("onCanvasMethodCallback", {
+        callbackId,
+        data: {
+          errMsg,
+          tempFilePath
+        }
+      }, getCurrentPageId());
     });
-    return {
-      canvas,
-      sensor,
-      Attrs,
-      ExcludeAttrs,
-      Listeners
-    };
   }
-};
-const _hoisted_1$3 = {
-  class: "uni-canvas-canvas",
-  ref: "canvas",
-  width: "300",
-  height: "150"
-};
-const _hoisted_2$2 = {style: {"position": "absolute", "top": "0", "left": "0", "width": "100%", "height": "100%", "overflow": "hidden"}};
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ResizeSensor = resolveComponent("ResizeSensor");
-  return openBlock(), createBlock("uni-canvas", mergeProps({
-    "canvas-id": $props.canvasId,
-    "disable-scroll": $props.disableScroll
-  }, {...$setup.Attrs, ...$setup.ExcludeAttrs}, toHandlers($options._listeners)), [
-    createVNode("canvas", _hoisted_1$3, null, 512),
-    createVNode("div", _hoisted_2$2, [
-      renderSlot(_ctx.$slots, "default")
-    ]),
-    createVNode(_component_ResizeSensor, {
-      ref: "sensor",
-      onResize: $options._resize
-    }, null, 8, ["onResize"])
-  ], 16, ["canvas-id", "disable-scroll"]);
+  const methods = {
+    actionsChanged,
+    getImageData,
+    putImageData,
+    toTempFilePath
+  };
+  function _handleSubscribe(type, data = {}) {
+    let method = methods[type];
+    if (type.indexOf("_") !== 0 && typeof method === "function") {
+      method(data);
+    }
+  }
+  return extend(methods, {
+    _resize,
+    _handleSubscribe
+  });
 }
-_sfc_main$4.render = _sfc_render$4;
 const uniCheckGroupKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniCheckGroup" : "ucg");
 const props$x = {
   name: {
@@ -3285,7 +3294,7 @@ var index$n = /* @__PURE__ */ defineBuiltInComponent({
         uniLabel.removeHandler(_onClick);
       });
     }
-    useListeners(props2, {
+    useListeners$1(props2, {
       "label-click": _onClick
     });
     return () => {
@@ -7543,7 +7552,7 @@ var index$g = /* @__PURE__ */ defineBuiltInComponent({
         uniLabel.removeHandler(_onClick);
       });
     }
-    useListeners(props2, {
+    useListeners$1(props2, {
       "label-click": _onClick
     });
     return () => {
@@ -9240,7 +9249,7 @@ var index$e = /* @__PURE__ */ defineBuiltInComponent({
         uniLabel.removeHandler(_onClick);
       });
     }
-    useListeners(props2, {
+    useListeners$1(props2, {
       "label-click": _onClick
     });
     return () => {
@@ -9563,12 +9572,12 @@ function useOn(name, callback) {
   onBeforeUnmount(() => UniViewJSBridge.off(name));
 }
 let index$a = 0;
-function useContextInfo() {
+function useContextInfo(_id) {
   const page = useCurrentPageId();
   const instance2 = getCurrentInstance();
   const vm = instance2.proxy;
   const type = vm.$options.name.toLowerCase();
-  const id2 = vm.id || `context${index$a++}`;
+  const id2 = _id || vm.id || `context${index$a++}`;
   onMounted(() => {
     const el = vm.$el;
     el.__uniContextInfo = {
@@ -15012,7 +15021,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const windowWidth = getWindowWidth(screenWidth);
   let windowHeight = window.innerHeight;
   const language = navigator.language;
-  const statusBarHeight = out.top;
+  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
   let osname;
   let osversion;
   let model;
@@ -15125,12 +15134,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const system = `${osname} ${osversion}`;
   const platform = osname.toLocaleLowerCase();
   const safeArea = {
-    left: out.left,
-    right: windowWidth - out.right,
-    top: out.top,
-    bottom: windowHeight - out.bottom,
-    width: windowWidth - out.left - out.right,
-    height: windowHeight - out.top - out.bottom
+    left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left,
+    right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+    top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
+    bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
+    width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+    height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom
   };
   const {top: windowTop, bottom: windowBottom} = getWindowOffset();
   windowHeight -= windowTop;
@@ -15150,10 +15159,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
     model,
     safeArea,
     safeAreaInsets: {
-      top: out.top,
-      right: out.right,
-      bottom: out.bottom,
-      left: out.left
+      top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
+      right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+      bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
+      left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left
     }
   };
 });
@@ -20265,4 +20274,4 @@ var index = /* @__PURE__ */ defineSystemComponent({
     return openBlock(), createBlock("div", clazz, [loadingVNode]);
   }
 });
-export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$5 as Audio, index$p as Button, _sfc_main$4 as Canvas, index$n as Checkbox, index$o as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$m as Editor, index$r as Form, Friction, index$l as Icon, index$k as Image, Input, index$q as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$j as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$i as Progress, index$g as Radio, index$h as RadioGroup, ResizeSensor, _sfc_main$3 as RichText, _sfc_main$2 as ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$e as Switch, index$d as Text, index$c as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$b as View, index$6 as WebView, addInterceptor, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLocation, getNetworkType, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getVideoInfo, hideKeyboard, hideLoading, hideNavigationBarLoading, hideTabBar, hideTabBarRedDot, hideToast, initScrollBounce, loadFontFace, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeStorage, removeStorageSync, removeTabBarBadge, request, sendSocketMessage, setNavigationBarColor, setNavigationBarTitle, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setupApp, setupPage, showActionSheet, showLoading, showModal, showNavigationBarLoading, showTabBar, showTabBarRedDot, showToast, startAccelerometer, startCompass, startPullDownRefresh, stopAccelerometer, stopCompass, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};
+export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$4 as Audio, index$q as Button, index$p as Canvas, index$n as Checkbox, index$o as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$m as Editor, index$s as Form, Friction, index$l as Icon, index$k as Image, Input, index$r as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$j as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$i as Progress, index$g as Radio, index$h as RadioGroup, ResizeSensor, _sfc_main$3 as RichText, _sfc_main$2 as ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$e as Switch, index$d as Text, index$c as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$b as View, index$6 as WebView, addInterceptor, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLocation, getNetworkType, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getVideoInfo, hideKeyboard, hideLoading, hideNavigationBarLoading, hideTabBar, hideTabBarRedDot, hideToast, initScrollBounce, loadFontFace, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeStorage, removeStorageSync, removeTabBarBadge, request, sendSocketMessage, setNavigationBarColor, setNavigationBarTitle, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setupApp, setupPage, showActionSheet, showLoading, showModal, showNavigationBarLoading, showTabBar, showTabBarRedDot, showToast, startAccelerometer, startCompass, startPullDownRefresh, stopAccelerometer, stopCompass, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};

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

-export function saveImage(base64: string, dirname: string, callback: Function) {
+export function saveImage(
+  base64: string,
+  dirname: string,
+  callback: (error: Error | null, tempFilePath: string) => void
+) {
   callback(null, base64)
 }