capture image on initial save

similar to #111

web/src/helpers/cloudinary.js

@@ -1,5 +1,7 @@
 // TODO: create a tidy util for uploading to Cloudinary and returning the public ID
 import axios from 'axios'
+import { threejsViewport } from 'src/cascade/js/MainPage/CascadeState'
+import CascadeController from 'src/helpers/cascadeController'
 
 const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
 const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
@@ -18,4 +20,13 @@ export async function uploadToCloudinary(imgBlob) {
   } catch (e) {
     console.error('ERROR', e)
   }
-}
+}
+
+export const captureAndSaveViewport = async () => {
+  // Get the canvas image as a Data URL
+  const imgBlob = await CascadeController.capture(threejsViewport.environment)
+
+  // Upload the image to Cloudinary
+  const { public_id: publicId } = await uploadToCloudinary(imgBlob)
+  return { publicId, imgBlob }
+}