Output as JPEG if browser doesn't support WebP

This is necessary to avoid unexpectedly large files in Safari.
onstuimig · Nov 14, 2023 · 1ab6277 · 1ab6277
1 parent 00dd125
commit 1ab6277
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cropt",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "A lightweight JavaScript image cropper",
   "files": [
     "src/cropt.*"

diff --git a/src/cropt.ts b/src/cropt.ts
@@ -100,6 +100,13 @@ function getArrowKeyDeltas(key: string): [number, number] {
     }
 }
 
+function canvasSupportsWebP() {
+    // https://caniuse.com/mdn-api_htmlcanvaselement_toblob_type_parameter_webp
+    return document.createElement('canvas')
+        .toDataURL('image/webp')
+        .startsWith('data:image/webp');
+}
+
 type RecursivePartial<T> = {
     [P in keyof T]?: RecursivePartial<T[P]>;
 };
@@ -252,6 +259,10 @@ export class Cropt {
     }
 
     toBlob(size: number | null = null, type = "image/webp", quality = 1): Promise<Blob> {
+        if (type === "image/webp" && quality < 1 && !canvasSupportsWebP()) {
+            type = "image/jpeg";
+        }
+
         return new Promise((resolve, reject) => {
             this.toCanvas(size).then((canvas) => {
                 canvas.toBlob((blob) => {