Improvement(ImageCropper): scale image down

After cropping, the avatar editor would upload the full-size image even
though these images are used at much smaller dimensions.

This change uses a version of the image scaled down to the size of the
canvas which results in considerable file size reduction for large images.

Author: matijs

package-lock.json

@@ -72,6 +72,7 @@
         "@types/jest": "^23.3.14",
         "@types/lodash.debounce": "^4.0.6",
         "@types/node": "^11.9.3",
+        "@types/react-avatar-editor": "^10.3.5",
         "@types/react-dom": "^16.0.7",
         "@types/react-router": "^4.0.30",
         "@types/react-router-dom": "^4.3.0",

package.json

@@ -1,23 +1,15 @@
 // Copyright (c) 2018 Ultimaker B.V.
 import * as React from 'react';
 import { shallow } from 'enzyme';
-
-// component
+import AvatarEditor from 'react-avatar-editor';
 import RangeSlider from '../range_slider';
 import ImageCropper from '../image_cropper';
 
-let AvatarEditor = require('react-avatar-editor');
-
-if ('default' in AvatarEditor) {
-    /* istanbul ignore next */ // ignores coverage for this line.
-    AvatarEditor = AvatarEditor.default;
-}
-
 describe('The Image Cropper component', () => {
     let props;
     const onImageChanged = jest.fn();
     const onCropCancel = jest.fn();
-    const editor = { getImage: () => ({ toDataURL: () => 'imageData' }) };
+    const mockEditor = { getImageScaledToCanvas: () => ({ toDataURL: () => 'imageData' }) };
 
     beforeEach(() => {
         onImageChanged.mockReset();
@@ -31,7 +23,7 @@ describe('The Image Cropper component', () => {
     const createWrapper = () => {
         const wrapper = shallow(<ImageCropper {...props} />);
         // @ts-ignore
-        wrapper.instance()._editor = editor;
+        wrapper.instance()._editor = mockEditor;
         return wrapper;
     };
 

src/components/__tests__/image_cropper.test.tsx

@@ -1,20 +1,11 @@
 // Copyright (c) 2018 Ultimaker B.V.
 import * as React from 'react';
-
+import debounce from 'lodash.debounce';
+import AvatarEditor from 'react-avatar-editor';
 import { ImageShape } from './image';
 import RangeSlider from './range_slider';
 import CloseButton from './close_button';
 
-// needs to be imported this way to keep jest happy
-let AvatarEditor = require('react-avatar-editor');
-
-if ('default' in AvatarEditor) {
-    /* istanbul ignore next */ // ignores coverage for this line.
-    AvatarEditor = AvatarEditor.default;
-}
-
-const debounce = require('lodash.debounce');
-
 export interface ImageCropperProps {
     /** Size of the image. Include size unit */
     size?: string;
@@ -38,10 +29,10 @@ export interface ImageCropperProps {
     imageURL?: string;
 
     /** Callback for when the image is changed */
-    onImageChanged: (data: string) => any;
+    onImageChanged: (data: string) => void;
 
     /** If given, the user is allowed to cancel cropping. This callback is then called. */
-    onCropCancel?: () => any;
+    onCropCancel?: () => void;
 }
 
 export interface ImageCropperState {
@@ -81,7 +72,7 @@ export class ImageCropper extends React.Component<ImageCropperProps, ImageCroppe
      */
     _onImageChanged = debounce(() => {
         const { onImageChanged } = this.props;
-        const canvas = this._editor.getImage();
+        const canvas = this._editor.getImageScaledToCanvas();
         const imageData = canvas.toDataURL();
         onImageChanged(imageData);
     }, 100);