From 5519020c2a8e3f8afc2ca19deab13345b8a5d69a Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Wed, 9 Nov 2022 21:55:14 -0800
Subject: [PATCH] editor: use b64 for save

---
 lib/Controller/PageController.php |  3 +++
 src/components/ImageEditor.vue    | 32 ++++++++++++-------------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 8097d721..7c2100d1 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -103,6 +103,9 @@ class PageController extends Controller
         $policy->addAllowedScriptDomain('blob:');
         $policy->addAllowedMediaDomain('blob:');
 
+        // Image editor
+        $policy->addAllowedConnectDomain('data:');
+
         // Allow nominatim for metadata
         $policy->addAllowedConnectDomain('nominatim.openstreetmap.org');
         $policy->addAllowedFrameDomain('www.openstreetmap.org');
diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index 17f7e246..9b4c6215 100644
--- a/src/components/ImageEditor.vue
+++ b/src/components/ImageEditor.vue
@@ -171,32 +171,21 @@ export default class ImageEditor extends Mixins(GlobalMixin) {
    * User saved the image
    *
    * @see https://github.com/scaleflex/filerobot-image-editor#onsave
-   * @param {object} props destructuring object
-   * @param {string} props.fullName the file name
-   * @param {HTMLCanvasElement} props.imageCanvas the image canvas
-   * @param {string} props.mimeType the image mime type
-   * @param {number} props.quality the image saving quality
    */
   async onSave({
     fullName,
-    imageCanvas,
-    mimeType,
-    quality,
+    imageBase64,
   }: {
     fullName?: string;
-    imageCanvas?: HTMLCanvasElement;
-    mimeType?: string;
-    quality?: number;
+    imageBase64?: string;
   }): Promise<void> {
+    if (!imageBase64) {
+      throw new Error("No image data");
+    }
+
     const { origin, pathname } = new URL(this.src);
     const putUrl = origin + join(dirname(pathname), fullName);
 
-    // toBlob is not very smart...
-    mimeType = mimeType.replace("jpg", "jpeg");
-
-    // Sanity check, 0 < quality < 1
-    quality = Math.max(Math.min(quality, 1), 0) || 1;
-
     if (
       !this.exif &&
       !confirm(this.t("memories", "No Exif data found! Continue?"))
@@ -205,9 +194,7 @@ export default class ImageEditor extends Mixins(GlobalMixin) {
     }
 
     try {
-      const blob = await new Promise((resolve: BlobCallback) =>
-        imageCanvas.toBlob(resolve, mimeType, quality)
-      );
+      const blob = await fetch(imageBase64).then((res) => res.blob());
       const response = await axios.put(putUrl, new File([blob], fullName));
       const fileid =
         parseInt(response?.headers?.["oc-fileid"]?.split("oc")[0]) || null;
@@ -645,4 +632,9 @@ export default class ImageEditor extends Mixins(GlobalMixin) {
 
   filter: var(--background-invert-if-dark);
 }
+
+.FIE_carousel-prev-button,
+.FIE_carousel-next-button {
+  background: none !important;
+}
 </style>
\ No newline at end of file