1 files changed, 25 insertions, 8 deletions
diff --git a/animism-align/frontend/util/index.js b/animism-align/frontend/util/index.js
index d723910..a50bccb 100644
--- a/animism-align/frontend/util/index.js
+++ b/animism-align/frontend/util/index.js
@@ -128,7 +128,7 @@ export const preloadImage = url => (
   })
 )
 
-export const cropImage = (url, crop) => {
+export const cropImage = (url, crop, maxSide) => {
   return new Promise((resolve, reject) => {
     let { x, y, w, h } = crop
     const image = new Image()
@@ -143,8 +143,22 @@ export const cropImage = (url, crop) => {
       image.onload = null
       const canvas = document.createElement('canvas')
       const ctx = canvas.getContext('2d')
-      const width = image.naturalWidth
-      const height = image.naturalHeight
+      const { naturalWidth, naturalHeight } = image
+      let height, width
+
+      if (maxSide > 0) {
+        if (naturalWidth > naturalHeight) {
+          width = Math.min(maxSide, naturalWidth)
+          height = naturalHeight * canvas.width / naturalWidth
+        } else {
+          height = Math.min(maxSide, naturalHeight)
+          width = naturalWidth * canvas.height / naturalHeight
+        }
+      } else {
+        width = naturalWidth
+        height = naturalHeight
+      }
+
       canvas.width = w * width
       canvas.height = h * height
       ctx.drawImage(
@@ -242,11 +256,14 @@ export const api = (dispatch, type=api_type, tag, url, data) => {
   } else {
     req = req.then(res => res.json())
   }
-  req = req.then(res => dispatch({
-    type: type.loaded,
-    tag,
-    data: res,
-  }))
+  req = req.then(res => {
+    dispatch({
+      type: type.loaded,
+      tag,
+      data: res,
+    })
+    return res
+  })
   .catch(err => dispatch({
     type: type.error,
     tag,