cropping images and uploading multiple versions

1 files changed, 34 insertions, 48 deletions

diff --git a/animism-align/frontend/util/index.js b/animism-align/frontend/util/index.js
index afebe13..37369f0 100644
--- a/animism-align/frontend/util/index.js
+++ b/animism-align/frontend/util/index.js
@@ -90,20 +90,11 @@ export const sha256_tree = (sha256, branch_size=2, tree_depth=2) => {
   return tree
 }
 
-export const imageUrl = (sha256, frame, size = 'th') => [
-  'https://' + process.env.S3_HOST + '/v1/media/keyframes',
-  sha256_tree(sha256),
-  pad(frame, 6),
-  size,
-  'index.jpg'
-].filter(s => !!s).join('/')
-
-export const uploadUri = ({ sha256, ext }) => '/static/data/uploads' + sha256_tree(sha256) + '/' + sha256 + ext
-export const metadataUri = (sha256, tag) => '/metadata/' + sha256 + '/' + tag + '/'
-export const keyframeUri = (sha256, frame) => '/metadata/' + sha256 + '/keyframe/' + pad(frame, 6) + '/'
-
-export const preloadImage = url => (
+export const preloadImage = (url, anonymous=false) => (
   new Promise((resolve, reject) => {
+    if (typeof url === 'object' && url instanceof Image) {
+      return resolve(url)
+    }
     const image = new Image()
     let loaded = false
     image.onload = () => {
@@ -120,7 +111,9 @@ export const preloadImage = url => (
       resolve(image)
     }
     // console.log(img.src)
-    // image.crossOrigin = 'anonymous'
+    if (anonymous) {
+      image.crossOrigin = 'anonymous'
+    }
     image.src = url
     if (image.complete) {
       image.onload()
@@ -130,57 +123,50 @@ export const preloadImage = url => (
 
 export const cropImage = (url, crop, maxSide) => {
   return new Promise((resolve, reject) => {
-    let { x, y, w, h } = crop
-    const image = new Image()
-    let loaded = false
-    x = parseFloat(x)
-    y = parseFloat(y)
-    w = parseFloat(w)
-    h = parseFloat(h)
-    image.onload = () => {
-      if (loaded) return
-      loaded = true
-      image.onload = null
+    preloadImage(url, true)
+    .then(image => {
+      let { x, y, w, h } = crop
+      x = parseFloat(x)
+      y = parseFloat(y)
+      w = parseFloat(w)
+      h = parseFloat(h)
       const canvas = document.createElement('canvas')
       const ctx = canvas.getContext('2d')
       const { naturalWidth, naturalHeight } = image
-      let height, width
+      
+      let width, height
+      let cropWidth = naturalWidth * w
+      let cropHeight = naturalHeight * h
 
       if (maxSide > 0) {
-        if (naturalWidth > naturalHeight) {
-          width = Math.min(maxSide, naturalWidth)
-          height = naturalHeight * canvas.width / naturalWidth
+        if (cropWidth > cropHeight) {
+          width = Math.min(maxSide, cropWidth)
+          height = cropHeight * width / cropWidth
         } else {
-          height = Math.min(maxSide, naturalHeight)
-          width = naturalWidth * canvas.height / naturalHeight
+          height = Math.min(maxSide, cropHeight)
+          width = cropWidth * height / cropHeight
         }
       } else {
-        width = naturalWidth
-        height = naturalHeight
+        width = cropWidth
+        height = cropHeight
       }
 
       canvas.width = w * width
       canvas.height = h * height
+
       ctx.drawImage(
         image,
-        Math.round(x * width),
-        Math.round(y * height),
-        Math.round(w * width),
-        Math.round(h * height),
+        Math.round(x * naturalWidth),
+        Math.round(y * naturalHeight),
+        Math.round(w * naturalWidth),
+        Math.round(h * naturalHeight),
         0, 0, canvas.width, canvas.height
       )
+      // console.log(x, y, w, h)
+      // console.log(naturalWidth, naturalHeight)
+      // console.log(width, height)
       resolve(canvas)
-    }
-    image.onerror = () => {
-      console.log('image error')
-      reject()
-    }
-    // console.log(img.src)
-    image.crossOrigin = 'anonymous'
-    image.src = url
-    if (image.complete) {
-      image.onload()
-    }
+    })
   })
 }
 export const urlSearchParamsToDict = search => {