fix: wrong image orientation on Safari

Author: Donaldcwl

lib/utils.js

@@ -1,5 +1,6 @@
 import UPNG from './UPNG';
-import MaxCanvasSize from './config/max-canvas-size';
+import MAX_CANVAS_SIZE from './config/max-canvas-size';
+import BROWSER_NAME from './config/browser-name';
 
 const isBrowser = typeof window !== 'undefined'; // change browser environment to support SSR
 
@@ -86,21 +87,25 @@ export function loadImage(src) {
  * @returns {string}
  */
 export function getBrowserName() {
-  let browserName = 'etc';
+  if (getBrowserName.cachedResult !== undefined) {
+    return getBrowserName.cachedResult;
+  }
+  let browserName = BROWSER_NAME.ETC;
   const { userAgent } = navigator;
   if (/Chrom(e|ium)/i.test(userAgent)) {
-    browserName = 'chrome';
+    browserName = BROWSER_NAME.CHROME;
   } 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';
+    browserName = BROWSER_NAME.MOBILE_SAFARI;
   } else if (/Safari/i.test(userAgent)) {
-    browserName = 'desktop safari';
+    browserName = BROWSER_NAME.DESKTOP_SAFARI;
   } else if (/Firefox/i.test(userAgent)) {
-    browserName = 'firefox';
+    browserName = BROWSER_NAME.FIREFOX;
   } else if (/MSIE/i.test(userAgent) || (!!document.documentMode) === true) { // IF IE > 10
-    browserName = 'internet explorer';
+    browserName = BROWSER_NAME.IE;
   }
-  return browserName;
+  getBrowserName.cachedResult = browserName;
+  return getBrowserName.cachedResult;
 }
 
 /**
@@ -114,7 +119,7 @@ export function getBrowserName() {
  */
 export function approximateBelowMaximumCanvasSizeOfBrowser(initWidth, initHeight) {
   const browserName = getBrowserName();
-  const maximumCanvasSize = MaxCanvasSize[browserName];
+  const maximumCanvasSize = MAX_CANVAS_SIZE[browserName];
 
   let width = initWidth;
   let height = initHeight;
@@ -215,8 +220,8 @@ export function isIOS() {
 export async function drawFileInCanvas(file, options = {}) {
   let img;
   try {
-    if (isIOS()) {
-      throw new Error('Skip createImageBitmap on IOS device'); // see https://github.com/Donaldcwl/browser-image-compression/issues/118
+    if (isIOS() || [BROWSER_NAME.DESKTOP_SAFARI, BROWSER_NAME.MOBILE_SAFARI].includes(getBrowserName())) {
+      throw new Error('Skip createImageBitmap on IOS and Safari'); // see https://github.com/Donaldcwl/browser-image-compression/issues/118
     }
     img = await createImageBitmap(file);
   } catch (e) {
@@ -287,7 +292,7 @@ export function cleanupCanvasMemory(canvas) {
 // Check if browser supports automatic image orientation
 // see https://github.com/blueimp/JavaScript-Load-Image/blob/1e4df707821a0afcc11ea0720ee403b8759f3881/js/load-image-orientation.js#L37-L53
 export async function isAutoOrientationInBrowser() {
-  if (isAutoOrientationInBrowser.result !== undefined) return isAutoOrientationInBrowser.result;
+  if (isAutoOrientationInBrowser.cachedResult !== undefined) return isAutoOrientationInBrowser.cachedResult;
 
   // black 2x1 JPEG, with the following meta information set:
   // EXIF Orientation: 6 (Rotated 90° CCW)
@@ -305,8 +310,8 @@ export async function isAutoOrientationInBrowser() {
   const img = (await drawFileInCanvas(testImageFile2))[0];
   // console.log('img', img.width, img.height)
 
-  isAutoOrientationInBrowser.result = img.width === 1 && img.height === 2;
-  return isAutoOrientationInBrowser.result;
+  isAutoOrientationInBrowser.cachedResult = img.width === 1 && img.height === 2;
+  return isAutoOrientationInBrowser.cachedResult;
 }
 
 /**