basic blurring applet

1 files changed, 14 insertions, 13 deletions

diff --git a/client/common/upload.helpers.js b/client/common/upload.helpers.js
index eb42a993..4b38fb09 100644
--- a/client/common/upload.helpers.js
+++ b/client/common/upload.helpers.js
@@ -1,6 +1,6 @@
 import ExifReader from 'exifreader'
 
-export const MAX_SIDE = 300
+export const MAX_SIDE = 256
 
 function base64ToUint8Array(string, start, finish) {
   start = start || 0
@@ -110,16 +110,17 @@ export function renderToCanvas(img, options) {
   options = options || {}
 
   // Canvas max size for any side
-  const maxSize = MAX_SIDE
+  const maxSide = MAX_SIDE
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
   const initialScale = options.scale || 1
   // Scale to needed to constrain canvas to max size
-  let scale = getScale(img.width * initialScale, img.height * initialScale, maxSize, maxSize, true)
+  let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
+  console.log(scale)
   // Still need to apply the user defined scale
   scale *= initialScale
-  canvas.width = Math.round(img.width * scale)
-  canvas.height = Math.round(img.height * scale)
+  canvas.width = Math.round(img.naturalWidth * scale)
+  canvas.height = Math.round(img.naturalHeight * scale)
   const { correctOrientation } = options
   const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
   const hasDataURI = !!img.src.match(/^data:/)
@@ -144,12 +145,12 @@ export function renderToCanvas(img, options) {
 
 export function renderThumbnail(img) {
   const resized = renderToCanvas(img, { correctOrientation: true })
-  const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
-  const ctx = canvas.getContext('2d')
-  ctx.fillStyle = 'black'
-  ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
-  const xOffset = (MAX_SIDE - resized.width) / 2
-  const yOffset = (MAX_SIDE - resized.height) / 2
-  ctx.drawImage(resized, xOffset, yOffset)
-  return canvas
+  // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
+  // const ctx = canvas.getContext('2d')
+  // ctx.fillStyle = 'black'
+  // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
+  // const xOffset = (MAX_SIDE - resized.width) / 2
+  // const yOffset = (MAX_SIDE - resized.height) / 2
+  // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
+  return resized
 }