fix: fixed output white picture on iOS Safari for large image because of canvas max size

Author: Donaldcwl

lib/config/max-canvas-size.js

@@ -1,8 +1,10 @@
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+// see: https://github.com/jhildenbiddle/canvas-size#test-results
+// see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
 export default {
   chrome: 16384,
-  firefox: 22528,
-  safari: 16384,
+  firefox: 11180,
+  'desktop safari': 16384,
   'internet explorer': 8192,
+  'mobile safari': 4096,
   etc: 8192,
 };

lib/utils.js

@@ -87,13 +87,17 @@ export function loadImage(src) {
  */
 export function getBrowserName() {
   let browserName = 'etc';
-  if (navigator.userAgent.indexOf('Chrome') !== -1 || navigator.userAgent.indexOf('Chromium') !== -1) {
+  const { userAgent } = navigator;
+  if (/Chrom(e|ium)/i.test(userAgent)) {
     browserName = 'chrome';
-  } if (navigator.userAgent.indexOf('Safari') !== -1) {
-    browserName = 'safari';
-  } else if (navigator.userAgent.indexOf('Firefox') !== -1) {
+  } else if (/iP(ad|od|hone)/i.test(userAgent) && /WebKit/i.test(userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent))) {
+    // see: https://stackoverflow.com/a/35813965
+    browserName = 'mobile safari';
+  } else if (/Safari/i.test(userAgent)) {
+    browserName = 'desktop safari';
+  } else if (/Firefox/i.test(userAgent)) {
     browserName = 'firefox';
-  } else if ((navigator.userAgent.indexOf('MSIE') !== -1) || (!!document.documentMode === true)) { // IF IE > 10
+  } else if (/MSIE/i.test(userAgent) || (!!document.documentMode) === true) { // IF IE > 10
     browserName = 'internet explorer';
   }
   return browserName;