Limit canvas size to max supported by browser

components/viewer/modal/BackpackModal.vue

@@ -91,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+import canvasSize from 'canvas-size';
 import { elementToSVG, inlineResources } from 'dom-to-svg';
 import * as R from 'ramda';
 import { computed } from 'vue';
@@ -140,6 +141,14 @@ const objectMode = computed(() => {
   else return ViewContext.BackpackEnabled;
 });
 
+const maxCanvasSize = async (size: number) => {
+  const { width, height } = await canvasSize.maxArea({
+    max: size,
+    usePromise: true,
+  });
+  return { width, height };
+};
+
 const backpackRef = ref<HTMLDivElement>();
 const isLoading = ref(false);
 const backpackToImage = async () => {
@@ -182,9 +191,13 @@ const backpackToImage = async () => {
   await img.decode();
   // Create a canvas to draw the image to
   const canvas = document.createElement('canvas');
+  // Ensure the image size is not too large for the canvas
+  const { width, height } = await maxCanvasSize(
+    Math.max(img.naturalWidth, img.naturalHeight),
+  );
   // Set canvas dimensions to match the image
-  canvas.width = img.naturalWidth;
-  canvas.height = img.naturalHeight;
+  canvas.width = Math.min(width, img.naturalWidth);
+  canvas.height = Math.min(height, img.naturalHeight);
   const ctx = canvas.getContext('2d')!;
   // Draw the image to the canvas
   ctx.drawImage(img, 0, 0);
@@ -268,7 +281,7 @@ const backpackToImage = async () => {
 }
 
 .backpackRender {
-  width: 1280px !important;
+  width: 2000px !important;
 }
 .backpackRender .pack-info-container {
   position: unset;

package.json

@@ -14,6 +14,7 @@
     "@nuxt/eslint-config": "^0.5.6",
     "@nuxt/eslint-plugin": "^0.5.6",
     "@nuxt/image": "latest",
+    "@types/canvas-size": "^1.2.2",
     "@types/node": "^20.16.3",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
@@ -43,6 +44,7 @@
     "@vueuse/core": "^11.0.3",
     "@vueuse/nuxt": "^11.0.3",
     "bootstrap": "5.3.*",
+    "canvas-size": "^2.0.0",
     "dom-to-svg": "^0.12.2",
     "handlebars": "^4.7.8",
     "perfect-debounce": "^1.0.0",

yarn.lock

@@ -2421,6 +2421,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-size@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@types/canvas-size@npm:1.2.2"
+  checksum: d0e43a312677f7bd85530cc7d884119b0d55a1aaa60225c422e1df35f1bf88f0448c91d851161a53a74aa456e36d9cf1932e85cfe7dc6ee51a8e4ee33473aeb5
+  languageName: node
+  linkType: hard
+
 "@types/eslint@npm:^9.6.0":
   version: 9.6.1
   resolution: "@types/eslint@npm:9.6.1"
@@ -4219,6 +4226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-size@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "canvas-size@npm:2.0.0"
+  checksum: 04d1e5cdf99cda1471b9b4c8387cd06db0196e88f18ed25142dc9edbea487024ab52776c3dbe1dd087f0d4c7b685bb81bbb18a98b2c8441eff179c42db123539
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -8823,6 +8837,7 @@ __metadata:
     "@nuxt/image": latest
     "@pinia/nuxt": ^0.5.4
     "@popperjs/core": ^2.11.8
+    "@types/canvas-size": ^1.2.2
     "@types/node": ^20.16.3
     "@types/ramda": ^0.30.2
     "@typescript-eslint/eslint-plugin": ^8.4.0
@@ -8833,6 +8848,7 @@ __metadata:
     "@vueuse/core": ^11.0.3
     "@vueuse/nuxt": ^11.0.3
     bootstrap: 5.3.*
+    canvas-size: ^2.0.0
     dom-to-svg: ^0.12.2
     eslint: ^8.57.0
     eslint-config-prettier: ^8.10.0