fix: initHidpiOnce

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

@@ -29,7 +29,7 @@ import {
   useSubscribe,
   withWebEvent,
 } from "@dcloudio/uni-components";
-import { getCurrentPageVm, getCurrentPageId, onEventPrevent } from "@dcloudio/uni-core";
+import { getCurrentPageId, onEventPrevent } from "@dcloudio/uni-core";
 import { saveImage, getSameOriginUrl, getRealPath } from "@dcloudio/uni-platform";
 import ResizeSensor from "../resize-sensor";
 import { useNativeEvent } from "../../helpers/useEvent";
@@ -38,8 +38,6 @@ import { once } from "@dcloudio/uni-shared";
 
 const initHidpiOnce = /*#__PURE__*/ once(initHidpi)
 
-!__NODE_JS__ && initHidpiOnce();
-
 function $getRealPath(src) {
   return src ? getRealPath(src) : src;
 }
@@ -159,6 +157,10 @@ export default {
     const id = useContextInfo();
     useSubscribe(this._handleSubscribe, id, true);
   },
+  beforeMount() {
+    // 将来放在onBeforeMount时，编译至cjs时，会自动摇树掉
+    initHidpiOnce();
+  },
   mounted() {
     this.$trigger = useNativeEvent(this.$emit);
 
@@ -220,7 +222,7 @@ export default {
               color = resolveColor(data[1]);
             } else if (data[0] === "linear") {
               const LinearGradient = c2d.createLinearGradient(...data[1]);
-              data[2].forEach(function (data2) {
+              data[2].forEach(function(data2) {
                 const offset = data2[0];
                 const color = resolveColor(data2[1]);
                 LinearGradient.addColorStop(offset, color);
@@ -231,7 +233,7 @@ export default {
               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) {
+              data[2].forEach(function(data2) {
                 const offset = data2[0];
                 const color = resolveColor(data2[1]);
                 LinearGradient.addColorStop(offset, color);
@@ -242,7 +244,7 @@ export default {
                 data[1],
                 actions.slice(index + 1),
                 callbackId,
-                function (image) {
+                function(image) {
                   if (image) {
                     c2d[method1] = c2d.createPattern(image, data[2]);
                   }
@@ -258,7 +260,7 @@ export default {
             c2d[method1] = data[0] / 255;
           } else if (method1 === "shadow") {
             var _ = ["shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor"];
-            data.forEach(function (color_, method_) {
+            data.forEach(function(color_, method_) {
               c2d[_[method_]] =
                 _[method_] === "shadowColor" ? resolveColor(color_) : color_;
             });
@@ -281,14 +283,14 @@ export default {
         } else if (method === "fillPath" || method === "strokePath") {
           method = method.replace(/Path/, "");
           c2d.beginPath();
-          data.forEach(function (data_) {
+          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 A = (function() {
             var dataArray = [...data];
             var url = dataArray[0];
             var otherData = dataArray.slice(1);
@@ -298,7 +300,7 @@ export default {
                 url,
                 actions.slice(index + 1),
                 callbackId,
-                function (image) {
+                function(image) {
                   if (image) {
                     c2d.drawImage.apply(
                       c2d,
@@ -318,7 +320,7 @@ export default {
           }
         } else {
           if (method === "clip") {
-            data.forEach(function (data_) {
+            data.forEach(function(data_) {
               c2d[data_.method].apply(c2d, data_.data);
             });
             c2d.clip();
@@ -340,9 +342,9 @@ export default {
         );
       }
     },
-    preloadImage: function (actions) {
+    preloadImage: function(actions) {
       var self = this;
-      actions.forEach(function (action) {
+      actions.forEach(function(action) {
         var method = action.method;
         var data = action.data;
         var src = "";
@@ -363,7 +365,7 @@ export default {
          */
         function loadImage() {
           const image = (self._images[src] = new Image());
-          image.onload = function () {
+          image.onload = function() {
             image.ready = true;
           };
 
@@ -385,7 +387,7 @@ export default {
         }
       });
     },
-    checkImageLoaded: function (src, actions, callbackId, fn) {
+    checkImageLoaded: function(src, actions, callbackId, fn) {
       var self = this;
       var image = this._images[src];
       if (image.ready) {
@@ -394,13 +396,13 @@ export default {
       } else {
         this._actionsDefer.unshift([actions, true]);
         this.actionsWaiting = true;
-        image.onload = function () {
+        image.onload = function() {
           image.ready = true;
           fn(image);
           self.actionsWaiting = false;
           var actions = self._actionsDefer.slice(0);
           self._actionsDefer = [];
-          for (var action = actions.shift(); action; ) {
+          for (var action = actions.shift(); action;) {
             self.actionsChanged({
               actions: action[0],
               reserve: action[1],

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

@@ -1323,6 +1323,31 @@ function wrapper(canvas) {
   canvas.height = canvas.offsetHeight * pixelRatio;
   canvas.getContext("2d").__hidpi__ = true;
 }
+let isHidpi = false;
+function initHidpi() {
+  if (isHidpi) {
+    return;
+  }
+  isHidpi = true;
+  const proto = CanvasRenderingContext2D.prototype;
+  proto.drawImageByCanvas = function(_super) {
+    return function(canvas, srcx, srcy, srcw, srch, desx, desy, desw, desh, isScale) {
+      if (!this.__hidpi__) {
+        return _super.apply(this, arguments);
+      }
+      srcx *= pixelRatio;
+      srcy *= pixelRatio;
+      srcw *= pixelRatio;
+      srch *= pixelRatio;
+      desx *= pixelRatio;
+      desy *= pixelRatio;
+      desw = isScale ? desw * pixelRatio : desw;
+      desh = isScale ? desh * pixelRatio : desh;
+      _super.call(this, canvas, srcx, srcy, srcw, srch, desx, desy, desw, desh);
+    };
+  }(proto.drawImage);
+}
+const initHidpiOnce = /* @__PURE__ */ uniShared.once(initHidpi);
 function $getRealPath(src) {
   return src ? getRealPath(src) : src;
 }
@@ -1422,6 +1447,9 @@ var _sfc_main$7 = {
     const id = useContextInfo();
     useSubscribe(this._handleSubscribe, id, true);
   },
+  beforeMount() {
+    initHidpiOnce();
+  },
   mounted() {
     this.$trigger = useNativeEvent(this.$emit);
     this._resize();

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

@@ -594,7 +594,7 @@ var safeAreaInsets = {
   onChange,
   offChange
 };
-var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
+var 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 + 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
+    top: top ? top + out.top : 0,
+    bottom: bottom ? bottom + out.bottom : 0,
+    left: left ? left + out.left : 0,
+    right: right ? right + out.right : 0
   };
 }
 function updateCssVar(cssVars) {
@@ -1291,7 +1291,7 @@ function normalizePageMeta(pageMeta) {
       let offset = rpx2px(refreshOptions.offset);
       const {type} = navigationBar;
       if (type !== "transparent" && type !== "none") {
-        offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+        offset += NAVBAR_HEIGHT + out.top;
       }
       refreshOptions.offset = offset;
       refreshOptions.height = rpx2px(refreshOptions.height);
@@ -2520,7 +2520,6 @@ function initHidpi() {
   }
 }
 const initHidpiOnce = /* @__PURE__ */ once(initHidpi);
-initHidpiOnce();
 function $getRealPath(src) {
   return src ? getRealPath(src) : src;
 }
@@ -2620,6 +2619,9 @@ var _sfc_main$7 = {
     const id2 = useContextInfo();
     useSubscribe(this._handleSubscribe, id2, true);
   },
+  beforeMount() {
+    initHidpiOnce();
+  },
   mounted() {
     this.$trigger = useNativeEvent(this.$emit);
     this._resize();
@@ -14882,7 +14884,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const windowWidth = getWindowWidth(screenWidth);
   let windowHeight = window.innerHeight;
   const language = navigator.language;
-  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+  const statusBarHeight = out.top;
   let osname;
   let osversion;
   let model;
@@ -14995,12 +14997,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const system = `${osname} ${osversion}`;
   const platform = osname.toLocaleLowerCase();
   const safeArea = {
-    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
+    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
   };
   const {top: windowTop, bottom: windowBottom} = getWindowOffset();
   windowHeight -= windowTop;
@@ -15020,10 +15022,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
     model,
     safeArea,
     safeAreaInsets: {
-      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
+      top: out.top,
+      right: out.right,
+      bottom: out.bottom,
+      left: out.left
     }
   };
 });