From ae649b61e6828f49d06e30e4e1e99aa9bb4fde4b Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 22 Oct 2024 12:34:55 -0400
Subject: [PATCH] fix image node cross origin problem

---
 src/Classes/ApiManager/models/MediaFile.ts | 4 ++++
 src/KonvaApp/Nodes/ImageNode.ts            | 6 ++++--
 src/KonvaApp/Nodes/TextNode.ts             | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Classes/ApiManager/models/MediaFile.ts b/src/Classes/ApiManager/models/MediaFile.ts
index b799e11a93..2c57e7ba3e 100644
--- a/src/Classes/ApiManager/models/MediaFile.ts
+++ b/src/Classes/ApiManager/models/MediaFile.ts
@@ -28,6 +28,10 @@ export interface MediaFile {
   maybe_style_name: null | string;
   public_bucket_path: string;
   public_bucket_url: string;
+  media_links: {
+    cdn_url: string;
+    thumbnail_template: string;
+  };
   cover_image: {
     maybe_cover_image_public_bucket_path: null | string;
     default_cover: {
diff --git a/src/KonvaApp/Nodes/ImageNode.ts b/src/KonvaApp/Nodes/ImageNode.ts
index 79b40b1415..c68bfd6f1e 100644
--- a/src/KonvaApp/Nodes/ImageNode.ts
+++ b/src/KonvaApp/Nodes/ImageNode.ts
@@ -5,7 +5,7 @@ import { SelectionManager } from "../NodesManagers";
 import { Position, Size, NodeData, TransformationData } from "../types";
 
 import { NetworkedNode, UploadStatus } from "./NetworkedNode";
-import { minNodeSize, NodeType, transparent } from "./constants";
+import { NodeType, transparent } from "./constants";
 import { NodeUtilities } from "./NodeUtilities";
 
 interface ImageNodeContructor {
@@ -82,6 +82,7 @@ export class ImageNode extends NetworkedNode {
     refPosition: Position;
   }) {
     const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
     imageComponent.onload = () => {
       this.setProgress(0, UploadStatus.FILE_STAGED);
       this.imageSize = {
@@ -114,6 +115,7 @@ export class ImageNode extends NetworkedNode {
   private async loadImageFromUrl(mediaFileUrl: string) {
     this.setProgress(75, UploadStatus.LOADING);
     const newImage = new Image();
+    newImage.crossOrigin = "anonymous";
     newImage.onerror = () => {
       this.setProgress(90, UploadStatus.ERROR_ON_LOAD);
     };
@@ -158,7 +160,7 @@ export class ImageNode extends NetworkedNode {
       );
       return;
     }
-    this.mediaFileUrl = mediaFileResponse.data.public_bucket_url;
+    this.mediaFileUrl = mediaFileResponse.data.media_links.cdn_url;
     this.loadImageFromUrl(this.mediaFileUrl);
   }
 
diff --git a/src/KonvaApp/Nodes/TextNode.ts b/src/KonvaApp/Nodes/TextNode.ts
index 5c0d3e8654..114c5a6fcc 100644
--- a/src/KonvaApp/Nodes/TextNode.ts
+++ b/src/KonvaApp/Nodes/TextNode.ts
@@ -115,6 +115,7 @@ export class TextNode extends BaseNode {
 
     // Create a new Image object
     const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
     imageComponent.onload = () => {
       if (existingTransform) {
         this.kNode.setAttrs({