specify the maximum size of Canvas supported by each browser

Author: raccoonback

lib/config/max-canvas-size.js

@@ -0,0 +1,8 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+export default {
+    "chrome": 16384,
+    "firefox": 22528,
+    "safari": 16384,
+    "internet explorer": 8192,
+    "etc": 8192
+}

lib/utils.js

@@ -1,4 +1,6 @@
 import UPNG from './UPNG'
+import Bowser  from "bowser";
+import MaxCanvasSize from './config/max-canvas-size'
 
 const isBrowser = typeof window !== 'undefined' // change browser environment to support SSR
 
@@ -102,14 +104,54 @@ export function loadImage (src) {
   })
 }
 
+/**
+ * approximateBelowCanvasMaximumSizeOfBrowser
+ *
+ * it uses binary search to converge below the browser's maximum Canvas size.
+ *
+ * ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+ *
+ * @param {number} initWidth
+ * @param {number} initHeight
+ * @returns {object}
+ */
+function approximateBelowMaximumCanvasSizeOfBrowser(initWidth, initHeight) {
+  const browserName = getBrowserName()
+  const maximumCanvasSize = MaxCanvasSize[browserName]
+
+  let width = initWidth;
+  let height = initHeight
+  let size = width * height
+  const ratio = width > height ? height / width : width / height
+
+  while(size > maximumCanvasSize * maximumCanvasSize) {
+    const halfSizeWidth = (maximumCanvasSize + width) / 2;
+    const halfSizeHeight = (maximumCanvasSize + height) / 2;
+    if(halfSizeWidth < halfSizeHeight) {
+      height = halfSizeHeight
+      width = halfSizeHeight * ratio
+    } else {
+      height = halfSizeWidth * ratio
+      width = halfSizeWidth
+    }
+
+    size = width * height
+  }
+
+  return {
+    width, height
+  }
+}
+
 /**
  * drawImageInCanvas
  *
  * @param {HTMLImageElement} img
  * @returns {HTMLCanvasElement | OffscreenCanvas}
  */
 export function drawImageInCanvas (img) {
-  const [canvas, ctx] = getNewCanvasAndCtx(img.width, img.height)
+  const {width, height} = approximateBelowMaximumCanvasSizeOfBrowser(img.width, img.height)
+  const [canvas, ctx] = getNewCanvasAndCtx(width, height)
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   return canvas
 }
@@ -350,3 +392,20 @@ if (isBrowser) {
       Math.floor(value) === value
   }
 }
+
+/**
+ * getBrowserName
+ *
+ * Extracts the browser name from the useragent.
+ *
+ * @returns {string}
+ */
+export function getBrowserName() {
+  const browserName = Bowser.parse(globalThis.navigator.userAgent).browser.name || ''
+  const lowerCasedBrowserName = browserName.toLowerCase()
+  if(['chrome', 'safari', 'firefox'].includes(lowerCasedBrowserName)) {
+    return lowerCasedBrowserName
+  }
+
+  return 'etc'
+}