1 files changed, 8 insertions, 28 deletions

diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 24d53a8c8..c5a9d3ba4 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -1,19 +1,19 @@
 import * as iink from 'iink-ts';
 import { action, observable } from 'mobx';
 import * as React from 'react';
+import { imageUrlToBase64 } from '../../ClientUtils';
+import { aggregateBounds } from '../../Utils';
 import { Doc, DocListCast } from '../../fields/Doc';
 import { InkData, InkField, InkTool } from '../../fields/InkField';
 import { Cast, DateCast, ImageCast, NumCast } from '../../fields/Types';
-import { aggregateBounds } from '../../Utils';
+import { ImageField, URLField } from '../../fields/URLField';
+import { gptHandwriting } from '../apis/gpt/GPT';
 import { DocumentType } from '../documents/DocumentTypes';
-import { CollectionFreeFormView, MarqueeView } from './collections/collectionFreeForm';
-import { InkingStroke } from './InkingStroke';
-import './InkTranscription.scss';
 import { Docs } from '../documents/Documents';
+import './InkTranscription.scss';
+import { InkingStroke } from './InkingStroke';
+import { CollectionFreeFormView, MarqueeView } from './collections/collectionFreeForm';
 import { DocumentView } from './nodes/DocumentView';
-import { ImageField } from '../../fields/URLField';
-import { gptHandwriting } from '../apis/gpt/GPT';
-import { URLField } from '../../fields/URLField';
 /**
  * Class component that handles inking in writing mode
  */
@@ -260,7 +260,7 @@ export class InkTranscription extends React.Component {
                     const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
                     let response;
                     try {
-                        const hrefBase64 = await this.imageUrlToBase64(hrefComplete);
+                        const hrefBase64 = await imageUrlToBase64(hrefComplete);
                         response = await gptHandwriting(hrefBase64);
                     } catch {
                         console.error('Error getting image');
@@ -291,26 +291,6 @@ export class InkTranscription extends React.Component {
         }
         return undefined;
     }
-    /**
-     * converts the image to base url formate
-     * @param imageUrl imageurl taken from the collection icon
-     */
-    imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
 
     /**
      * Creates the ink grouping once the user leaves the writing mode.