Merge pull request #125 from Donaldcwl/dev

v1.0.17

Author: Donaldcwl

CHANGELOG.md

@@ -1,3 +1,6 @@
+## v1.0.17 (15 Nov 2021)
+* feature: apply white background to transparent PNG > JPG conversion if options.fileType is image/jpeg or image/jpg [#119](https://github.com/Donaldcwl/browser-image-compression/issues/119)
+* fixed: Fixed image cropped on Safari [#118](https://github.com/Donaldcwl/browser-image-compression/issues/118)
 ## v1.0.16 (26 Sep 2021)
 * fixed: Fixed output white picture on iOS Safari for large image because of canvas max size [#116](https://github.com/Donaldcwl/browser-image-compression/issues/116)
 * fixed: Fixed wrong image orientation on iOS device [#118](https://github.com/Donaldcwl/browser-image-compression/issues/118)

README.md

@@ -18,7 +18,7 @@ yarn add browser-image-compression
 ```
 or use a CDN like [delivrjs]:
 ```
-https://cdn.jsdelivr.net/npm/[email protected].16/dist/browser-image-compression.js
+https://cdn.jsdelivr.net/npm/[email protected].17/dist/browser-image-compression.js
 or
 https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js
 ```
@@ -42,14 +42,14 @@ or
 
 #### In html file ####
 ```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].16/dist/browser-image-compression.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].17/dist/browser-image-compression.js"></script>
 ```
 
 ## API ##
 ### Main function ###
 ```javascript
 // you should provide one of maxSizeMB, maxWidthOrHeight in the options
-const options = { 
+const options: Options = { 
   maxSizeMB: number,          // (default: Number.POSITIVE_INFINITY)
   maxWidthOrHeight: number,   // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
                               // but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.
@@ -64,7 +64,7 @@ const options = {
   initialQuality: number      // optional, initial quality value between 0 and 1 (default: 1)
 }
 
-imageCompression(file: File, options): Promise<File>
+imageCompression(file: File, options: Options): Promise<File>
 ```
 
 #### Caveat ####
@@ -79,7 +79,7 @@ imageCompression.getDataUrlFromFile(file: File): Promise<base64 encoded string>
 imageCompression.getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>
 imageCompression.loadImage(url: string): Promise<HTMLImageElement>
 imageCompression.drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement | OffscreenCanvas
-imageCompression.drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
+imageCompression.drawFileInCanvas(file: File, options?: Options): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
 imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>
 imageCompression.getExifOrientation(file: File): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024
 ```

example-express-server/README.md

@@ -15,7 +15,7 @@ yarn dev
 ## Sample frontend HTML
 ```html
 <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].16/dist/browser-image-compression.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].17/dist/browser-image-compression.js"></script>
 <input type="file" accept="image/*" onchange="compressImage(event);">
 <script>
     function compressImage (event) {

example/basic.html

@@ -51,7 +51,7 @@
 </style>
 
 
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].16/dist/browser-image-compression.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].17/dist/browser-image-compression.js"></script>
 <script>
   document.querySelector('#version').innerHTML = imageCompression.version
   function compressImage (event, useWebWorker) {

lib/config/browser-name.js

@@ -0,0 +1,8 @@
+export default {
+  CHROME: 'CHROME',
+  FIREFOX: 'FIREFOX',
+  DESKTOP_SAFARI: 'DESKTOP_SAFARI',
+  IE: 'IE',
+  MOBILE_SAFARI: 'MOBILE_SAFARI',
+  ETC: 'ETC',
+};

lib/config/max-canvas-size.js

@@ -1,10 +1,12 @@
+import BROWSER_NAME from './browser-name';
+
 // 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: 11180,
-  'desktop safari': 16384,
-  'internet explorer': 8192,
-  'mobile safari': 4096,
-  etc: 8192,
+  [BROWSER_NAME.CHROME]: 16384,
+  [BROWSER_NAME.FIREFOX]: 11180,
+  [BROWSER_NAME.DESKTOP_SAFARI]: 16384,
+  [BROWSER_NAME.IE]: 8192,
+  [BROWSER_NAME.MOBILE_SAFARI]: 4096,
+  [BROWSER_NAME.ETC]: 8192,
 };

lib/image-compression.js

@@ -45,7 +45,7 @@ export default async function compress(file, options, previousProgress = 0) {
   incProgress();
 
   // drawFileInCanvas
-  const [, origCanvas] = await drawFileInCanvas(file);
+  const [, origCanvas] = await drawFileInCanvas(file, options);
 
   incProgress();
 

lib/index.d.ts

@@ -29,7 +29,7 @@ declare namespace imageCompression {
     function getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>;
     function loadImage(src: string): Promise<HTMLImageElement>;
     function drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement;
-    function drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>;
+    function drawFileInCanvas(file: File, options?: Options): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>;
     function canvasToFile(canvas: HTMLCanvasElement, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>;
     function getExifOrientation(file: File): Promise<number>;
 }

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;
@@ -212,11 +217,11 @@ export function isIOS() {
  * @param {File | Blob} file
  * @returns {Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>}
  */
-export async function drawFileInCanvas(file) {
+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) {
@@ -233,7 +238,7 @@ export async function drawFileInCanvas(file) {
       throw e2;
     }
   }
-  const canvas = drawImageInCanvas(img, file.type);
+  const canvas = drawImageInCanvas(img, options.fileType || file.type);
   return [img, canvas];
 }
 
@@ -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;
 }
 
 /**

lib/web-worker.js

@@ -4,7 +4,8 @@ import lib from './index';
 import compress from './image-compression';
 import { getNewCanvasAndCtx, isIOS } from './utils';
 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';
 
 let cnt = 0;
 let imageCompressionLibUrl;
@@ -89,7 +90,8 @@ function generateLib() {
     getNewCanvasAndCtx = ${getNewCanvasAndCtx}
     CustomFileReader = FileReader
     CustomFile = File
-    MaxCanvasSize = ${JSON.stringify(MaxCanvasSize)}
+    MAX_CANVAS_SIZE = ${JSON.stringify(MAX_CANVAS_SIZE)}
+    BROWSER_NAME = ${JSON.stringify(BROWSER_NAME)}
     function compress (){return (${compress}).apply(null, arguments)}
 
     // core-js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-image-compression",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Compress images in the browser",
   "main": "dist/browser-image-compression.js",
   "module": "dist/browser-image-compression.mjs",