1 files changed, 23 insertions, 5 deletions
diff --git a/animism-align/frontend/common/upload.helpers.js b/animism-align/frontend/common/upload.helpers.js
index f26e2cc..60d5b82 100644
--- a/animism-align/frontend/common/upload.helpers.js
+++ b/animism-align/frontend/common/upload.helpers.js
@@ -107,6 +107,23 @@ function getScale(width, height, viewportWidth, viewportHeight, fillViewport) {
   return 1
 }
 
+function getImageProperties(img) {
+  // img is an image
+  if ('naturalWidth' in img) {
+    const { naturalWidth, naturalHeight } = img
+    const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
+    const hasDataURI = !!img.src.match(/^data:/)
+    return { naturalWidth, naturalHeight, jpeg, hasDataURI }
+  }
+  // img is a canvas
+  return {
+    naturalWidth: img.width,
+    naturalHeight: img.height,
+    jpeg: false,
+    hasDataURI: false,
+  }
+}
+
 export function renderToCanvas(img, options) {
   if (!img) return null
   options = options || {}
@@ -126,7 +143,7 @@ export function renderToCanvas(img, options) {
   canvas.width = Math.round(img.naturalWidth * scale)
   canvas.height = Math.round(img.naturalHeight * scale)
   */
-  const { naturalWidth, naturalHeight } = img
+  const { naturalWidth, naturalHeight, jpeg, hasDataURI } = getImageProperties(img)
   if (maxSide > 0) {
     if (naturalWidth > naturalHeight) {
       canvas.width = Math.min(maxSide, naturalWidth)
@@ -140,8 +157,6 @@ export function renderToCanvas(img, options) {
     canvas.height = naturalHeight
   }
   const { correctOrientation } = options
-  const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
-  const hasDataURI = !!img.src.match(/^data:/)
 
   ctx.save()
 
@@ -161,8 +176,11 @@ export function renderToCanvas(img, options) {
   return canvas
 }
 
-export function renderThumbnail(img) {
-  const resized = renderToCanvas(img, { correctOrientation: true })
+export function renderThumbnail(img, options) {
+  const resized = renderToCanvas(img, {
+    correctOrientation: true,
+    ...options,
+  })
   // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
   // const ctx = canvas.getContext('2d')
   // ctx.fillStyle = 'black'