diff --git a/packages/uni-api/src/service/context/canvas.ts b/packages/uni-api/src/service/context/canvas.ts index 5a0150e5e3cc141d4cf09dfe9fb89920201ae96c..9d03a5a258316dc07a0ef428a879fd6f31950435 100644 --- a/packages/uni-api/src/service/context/canvas.ts +++ b/packages/uni-api/src/service/context/canvas.ts @@ -361,6 +361,7 @@ type ActionsItem = { method: string data: ActionsItemData | Array } +export type Actions = Array 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 - path: Array + actions: Actions + path: Actions subpath: Array state: DefaultState drawingState: Array @@ -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 = [] + var actions: Actions = [] style.forEach(function (value, index) { if (['italic', 'oblique', 'normal'].indexOf(value) > -1) { actions.push({ diff --git a/packages/uni-components/src/components/canvas/index.tsx b/packages/uni-components/src/components/canvas/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e257c1ce5c252e17d30116ef3070ef92f0ff6a38 --- /dev/null +++ b/packages/uni-components/src/components/canvas/index.tsx @@ -0,0 +1,734 @@ +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 + +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(null) + const sensor = ref(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 ( + + +
+ {slots.default && slots.default()} +
+ {/* @ts-ignore */} + + + ) + } + }, +}) + +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, + actionsWaiting: Ref +) { + 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> + type LinearGradient = Parameters< + CanvasFillStrokeStyles['createLinearGradient'] + > + const action = actions[index] + let method = action.method + const data = action.data as Array + 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 + 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, + }) +} diff --git a/packages/uni-components/src/components/canvas/index.vue b/packages/uni-components/src/components/canvas/index.vue deleted file mode 100644 index 89af4a803737fe968d089ae7541453607d7c707e..0000000000000000000000000000000000000000 --- a/packages/uni-components/src/components/canvas/index.vue +++ /dev/null @@ -1,630 +0,0 @@ - - diff --git a/packages/uni-components/src/components/index.ts b/packages/uni-components/src/components/index.ts index 346e0e2d5881c717a0b4f475c7e09572dc4b8b71..5eb786ab9a22bd36e03d9f1a233118c0588bdfb3 100644 --- a/packages/uni-components/src/components/index.ts +++ b/packages/uni-components/src/components/index.ts @@ -1,6 +1,6 @@ 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' diff --git a/packages/uni-components/src/helpers/useContextInfo.ts b/packages/uni-components/src/helpers/useContextInfo.ts index 01d18aa09fa39e66fcb7eb17082ca943c8084929..86a2caddd6991bca973f854539a98d3f0521804e 100644 --- a/packages/uni-components/src/helpers/useContextInfo.ts +++ b/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 = { diff --git a/packages/uni-h5/dist/uni-h5.cjs.js b/packages/uni-h5/dist/uni-h5.cjs.js index b5ba5eddc131f7801b5fe62eb5ee77eb0b6f0821..dc76dc1ebabdee0b3cac024fd3f89d6944613428 100644 --- a/packages/uni-h5/dist/uni-h5.cjs.js +++ b/packages/uni-h5/dist/uni-h5.cjs.js @@ -1,20 +1,4 @@ "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; diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js index d5b9b68ca5ef290d8e8ebe9a324d9edaaaf49e3d..329f18d7e2e20bc70202f9c71070005bacf603ac 100644 --- a/packages/uni-h5/dist/uni-h5.es.js +++ b/packages/uni-h5/dist/uni-h5.es.js @@ -1,5 +1,5 @@ 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}; diff --git a/packages/uni-h5/src/platform/saveImage.ts b/packages/uni-h5/src/platform/saveImage.ts index a3a435c01e9682c4306fabcee32395d867bf1509..07ea58a4de2dedee3243551097b97d53b3d2b873 100644 --- a/packages/uni-h5/src/platform/saveImage.ts +++ b/packages/uni-h5/src/platform/saveImage.ts @@ -1,3 +1,7 @@ -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) }