From 152f2f431d2729b1a2e22755901d8cffe1a864f3 Mon Sep 17 00:00:00 2001
From: Alice Pote <alice.writes.wrongs@gmail.com>
Date: Mon, 5 Dec 2016 14:48:38 -0500
Subject: [PATCH] Limited profile image size on the client to 512x512

This limits the profile image size on the client, by scaling down the
canvas used in the `<Cropper />`. This doesn't work on Safari and on
iOS, so on those platforms we just upload the image as-is.

pr #2004
---
 npm-shrinkwrap.json                    |  5 +++++
 package.json                           |  1 +
 static/js/components/CropperWrapper.js | 13 ++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 817fd2c72d..7b5587d890 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1880,6 +1880,11 @@
       "from": "destroy@>=1.0.4 <1.1.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz"
     },
+    "detect-browser": {
+      "version": "1.5.0",
+      "from": "detect-browser@latest",
+      "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-1.5.0.tgz"
+    },
     "detect-indent": {
       "version": "4.0.0",
       "from": "detect-indent@>=4.0.0 <5.0.0",
diff --git a/package.json b/package.json
index 820f4d1713..ff6cfe98ad 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "css-loader": "0.23.1",
     "currency-codes": "^1.1.2",
     "deep-freeze": "0.0.1",
+    "detect-browser": "^1.5.0",
     "enzyme": "^2.4.1",
     "eslint": "^3.11.1",
     "eslint-config-defaults": "9.0.0",
diff --git a/static/js/components/CropperWrapper.js b/static/js/components/CropperWrapper.js
index d24175550f..26e6eb53a1 100644
--- a/static/js/components/CropperWrapper.js
+++ b/static/js/components/CropperWrapper.js
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import Cropper from 'react-cropper';
+import browser from 'detect-browser';
 
 export default class CropperWrapper extends React.Component {
   props: {
@@ -11,10 +12,16 @@ export default class CropperWrapper extends React.Component {
 
   cropperHelper = () => {
     const { updatePhotoEdit } = this.props;
-    let canvas = this.refs.cropper.getCroppedCanvas();
-    if (canvas.toBlob !== undefined) {
-      canvas.toBlob(blob => updatePhotoEdit(blob), 'image/jpeg');
+    let canvas;
+    if ( browser.name === 'safari' || browser.name === 'ios' ) {
+      canvas = this.refs.cropper.getCroppedCanvas();
+    } else {
+      canvas = this.refs.cropper.getCroppedCanvas({
+        width: 512,
+        height: 512,
+      });
     }
+    canvas.toBlob(blob => updatePhotoEdit(blob), 'image/jpeg');
   };
 
   render () {