fix: canvas drawImage error

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

@@ -23,15 +23,24 @@
 </template>
 <script lang="ts">
 import { ref } from "vue";
-import { useAttrs, useContextInfo, useSubscribe, withWebEvent } from "@dcloudio/uni-components";
+import {
+  useAttrs,
+  useContextInfo,
+  useSubscribe,
+  withWebEvent,
+} from "@dcloudio/uni-components";
 import { getCurrentPageVm, getCurrentPageId, onEventPrevent } from "@dcloudio/uni-core";
-import { saveImage, getSameOriginUrl } from "@dcloudio/uni-platform";
+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";
 
 !__NODE_JS__ && initHidpi();
 
+function $getRealPath(src){
+  return src ? getRealPath(src) : src
+}
+
 function resolveColor(color) {
   color = color.slice(0);
   color[3] = color[3] / 255;
@@ -63,7 +72,7 @@ export default {
   name: "Canvas",
   inheritAttrs: false,
   compatConfig: {
-    MODE: 3
+    MODE: 3,
   },
   components: {
     ResizeSensor,
@@ -336,11 +345,11 @@ export default {
         var src = "";
         if (method === "drawImage") {
           src = data[0];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[0] = src;
         } else if (method === "setFillStyle" && data[0] === "pattern") {
           src = data[1];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[1] = src;
         }
         if (src && !self._images[src]) {

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

@@ -1322,6 +1322,9 @@ function wrapper(canvas) {
   canvas.height = canvas.offsetHeight * pixelRatio;
   canvas.getContext("2d").__hidpi__ = true;
 }
+function $getRealPath(src) {
+  return src ? getRealPath(src) : src;
+}
 function resolveColor(color) {
   color = color.slice(0);
   color[3] = color[3] / 255;
@@ -1583,11 +1586,11 @@ var _sfc_main$7 = {
         var src = "";
         if (method === "drawImage") {
           src = data[0];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[0] = src;
         } else if (method === "setFillStyle" && data[0] === "pattern") {
           src = data[1];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[1] = src;
         }
         if (src && !self._images[src]) {

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

@@ -594,7 +594,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(() => {
@@ -606,10 +606,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) {
@@ -1292,7 +1292,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);
@@ -2519,6 +2519,9 @@ function initHidpi() {
   }
 }
 initHidpi();
+function $getRealPath(src) {
+  return src ? getRealPath(src) : src;
+}
 function resolveColor(color) {
   color = color.slice(0);
   color[3] = color[3] / 255;
@@ -2780,11 +2783,11 @@ var _sfc_main$7 = {
         var src = "";
         if (method === "drawImage") {
           src = data[0];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[0] = src;
         } else if (method === "setFillStyle" && data[0] === "pattern") {
           src = data[1];
-          src = self.$getRealPath(src);
+          src = $getRealPath(src);
           data[1] = src;
         }
         if (src && !self._images[src]) {
@@ -14870,7 +14873,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;
@@ -14983,12 +14986,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;
@@ -15008,10 +15011,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
     }
   };
 });