@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js

@@ -19,7 +19,9 @@ import React from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
-import { calculateScaleRatio, calculateScalePercentage, round } from './utils';
+import { View } from '@instructure/ui-view';
+import { calculateScaleRatio, calculateScalePercentage } from './utils';
+import round from '../../../../utils/round';
 import { MAX_SCALE_RATIO, MIN_SCALE_RATIO, BUTTON_SCALE_STEP } from '../constants';
 import formatMessage from '../../../../../../../format-message';
 import PropTypes from 'prop-types';
@@ -73,7 +75,12 @@ export const ZoomControls = _ref => {
     onZoomChange(newScaleRatio);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    title: formatMessage('Zoom'),
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: round(scaleRatio * 100),
@@ -82,17 +89,17 @@ export const ZoomControls = _ref => {
     processValueCallback: calculateScalePercentage,
     placeholder: formatMessage('Zoom'),
     onChange: value => onZoomChange(round(value / 100))
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: zoomOutCallback,
     interaction: scaleRatio > MIN_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: formatMessage('Zoom out image')
-  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "zoom-in-button",
     onClick: zoomInCallback,
     interaction: scaleRatio < MAX_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: formatMessage('Zoom in image')
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null))));
+  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
 };
 ZoomControls.propTypes = {
   scaleRatio: PropTypes.number,

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js

@@ -21,6 +21,7 @@ import { actions } from '../../../../reducers/imageCropper';
 import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
+import { ResetControls } from './ResetControls';
 export const Controls = _ref => {
   let {
     settings,
@@ -30,7 +31,8 @@ export const Controls = _ref => {
     id: "imageCropperControls",
     direction: "row",
     margin: "x-small",
-    alignItems: "start"
+    alignItems: "start",
+    role: "group"
   }, /*#__PURE__*/React.createElement(ShapeControls, {
     shape: settings.shape,
     onChange: shape => dispatch({
@@ -49,5 +51,11 @@ export const Controls = _ref => {
       type: actions.SET_SCALE_RATIO,
       payload: scaleRatio
     })
+  }), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true
+  }), /*#__PURE__*/React.createElement(ResetControls, {
+    onReset: () => dispatch({
+      type: actions.RESET_SETTINGS
+    })
   }));
 };

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js

@@ -16,10 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
-export const round = function (number) {
-  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return parseFloat(number.toFixed(digits));
-};
+import round from '../../../../utils/round';
 export const calculateScaleRatio = scaleRatio => {
   let result = round(scaleRatio);
   result = result > MAX_SCALE_RATIO ? MAX_SCALE_RATIO : result;

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import round from 'round';
+import round from '../../../utils/round';
 import { buildShapeMask } from './svg/shape';
 import { createSvgElement } from './svg/utils';
 import { PREVIEW_HEIGHT } from './constants';

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import round from 'round';
+import round from '../../../../utils/round';
 import { SHAPE_CONTAINER_LENGTH } from '../constants';
 import { createSvgElement } from './utils';
 import { Shape } from '../../../../svg/shape';

package/lib/{translated/ar/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useArrowKeys.js → rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js}

@@ -19,35 +19,16 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
  */
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { debounce } from '@instructure/debounce';
-import { round } from './controls/utils';
+import round from '../../../utils/round';
 import { KEY_EVENT_DELAY, KEY_EVENT_STEP } from './constants';
 import { actions } from '../../../reducers/imageCropper';
 const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
-export function useArrowKeys(translateX, translateY, dispatch) {
-  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
-  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
-  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
-
-  const tempTranslateXRef = useRef(tempTranslateX);
-  const tempTranslateYRef = useRef(tempTranslateY); // Refs that manage the keydown acceleration
 
+function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving) {
+  // Refs that manage the keydown acceleration
   const direction = useRef(0);
   const elapsedTime = useRef(0);
 
-  const setTempTranslateX = data => {
-    setIsMoving(true);
-    tempTranslateXRef.current = data;
-
-    _setTempTranslateX(data);
-  };
-
-  const setTempTranslateY = data => {
-    setIsMoving(true);
-    tempTranslateYRef.current = data;
-
-    _setTempTranslateY(data);
-  };
-
   const onKeyDownCallback = event => {
     var _context, _context2, _context3;
 
@@ -111,11 +92,81 @@ export function useArrowKeys(translateX, translateY, dispatch) {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
-    if (isMoving) {
+    if (isMoving && direction.current !== 0) {
       stopMovementCallback();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [tempTranslateX, tempTranslateY]); // Updates the reducer state when user stops moving.
+  }, [tempTranslateX, tempTranslateY]);
+}
+
+function useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
+  const initialPageX = useRef(0);
+  const initialPageY = useRef(0);
+  const mouseDown = useRef(false);
+  const imgElement = useRef(null);
+  const containerElement = useRef(null);
+
+  const stoppedMovingCallback = () => {
+    mouseDown.current = false;
+    initialPageX.current = 0;
+    initialPageY.current = 0;
+    imgElement.current.onmousemove = null;
+    imgElement.current.onmouseup = null;
+    imgElement.current = null;
+    containerElement.current.onmouseout = null;
+    containerElement.current = null;
+    setIsMoving(false);
+  };
+
+  const startedMovingCallback = (target, clientX, clientY, container) => {
+    mouseDown.current = true;
+    initialPageX.current = clientX;
+    initialPageY.current = clientY;
+    target.onmousemove = onMouseMoveCallback;
+    target.onmouseup = stoppedMovingCallback;
+    imgElement.current = target; // Should stop the movement when mouse leaves the preview
+
+    container.onmouseout = stoppedMovingCallback;
+    containerElement.current = container;
+    setIsMoving(true);
+  };
+
+  const onMouseMoveCallback = e => {
+    if (!mouseDown.current) {
+      return stoppedMovingCallback();
+    }
+
+    setTempTranslateX(tempTranslateX + e.clientX - initialPageX.current);
+    setTempTranslateY(tempTranslateY + e.clientY - initialPageY.current);
+  };
+
+  return (e, container) => startedMovingCallback(e.target, e.clientX, e.clientY, container);
+}
+
+export function useKeyMouseEvents(translateX, translateY, dispatch, imgRef) {
+  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
+  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
+  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
+
+  const tempTranslateXRef = useRef(tempTranslateX);
+  const tempTranslateYRef = useRef(tempTranslateY);
+
+  const setTempTranslateX = data => {
+    setIsMoving(true);
+    tempTranslateXRef.current = data;
+
+    _setTempTranslateX(data);
+  };
+
+  const setTempTranslateY = data => {
+    setIsMoving(true);
+    tempTranslateYRef.current = data;
+
+    _setTempTranslateY(data);
+  };
+
+  useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving);
+  const onMouseDownCallback = useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
 
   useEffect(() => {
     if (isMoving) {
@@ -144,13 +195,17 @@ export function useArrowKeys(translateX, translateY, dispatch) {
     }
 
     if (translateX !== tempTranslateX) {
-      setTempTranslateX(translateX);
+      tempTranslateXRef.current = translateX;
+
+      _setTempTranslateX(translateX);
     }
 
     if (translateY !== tempTranslateY) {
-      setTempTranslateY(translateY);
+      tempTranslateYRef.current = translateY;
+
+      _setTempTranslateY(translateY);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [translateX, translateY]);
-  return [tempTranslateX, tempTranslateY, onKeyDownCallback];
+  return [tempTranslateX, tempTranslateY, onMouseDownCallback];
 }

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js

@@ -22,10 +22,56 @@ import ImageList from '../../../../instructure_image/Images';
 import { useStoreProps } from '../../../../shared/StoreContext';
 import useDataUrl from '../../../../shared/useDataUrl';
 import { actions } from '../../../reducers/imageSection';
+import { canCompressImage, compressImage, shouldCompressImage } from './compressionUtils';
+import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
+import { actions as svgActions } from '../../../reducers/svgSettings';
+import formatMessage from '../../../../../../format-message';
+
+const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
+  let image = dataUrl;
+
+  if (isAnUnsupportedGifPngImage(dataBlob)) {
+    dispatch({ ...actions.CLEAR_IMAGE
+    });
+    return onChange({
+      type: svgActions.SET_ERROR,
+      payload: formatMessage('GIF/PNG format images larger than {size} KB are not currently supported.', {
+        size: MAX_GIF_PNG_SIZE_BYTES / 1024
+      })
+    });
+  }
+
+  dispatch({ ...actions.SET_IMAGE,
+    payload: ''
+  });
+  dispatch({ ...actions.SET_CROPPER_OPEN,
+    payload: true
+  });
+
+  if (canCompressImage() && shouldCompressImage(dataBlob)) {
+    try {
+      // If compression fails, use the original one
+      // TODO: We can show the user that compression failed in some way
+      image = await compressImage(dataUrl);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+
+    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+      payload: true
+    });
+  }
+
+  dispatch({ ...actions.SET_IMAGE,
+    payload: image
+  });
+};
 
 const Course = _ref => {
   let {
     dispatch,
+    onChange,
     onLoading,
     onLoaded
   } = _ref;
@@ -39,20 +85,16 @@ const Course = _ref => {
   const {
     setUrl,
     dataUrl,
-    dataLoading
+    dataLoading,
+    dataBlob
   } = useDataUrl();
   const category = 'uncategorized'; // Handle image selection
 
   useEffect(() => {
     // Don't clear the current image on re-render
-    if (!dataUrl) return;
-    dispatch({ ...actions.SET_IMAGE,
-      payload: dataUrl
-    });
-    dispatch({ ...actions.SET_CROPPER_OPEN,
-      payload: true
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataUrl]); // Handle loading states
+    if (!dataUrl || !dataBlob) return;
+    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUrl, dataBlob]); // Handle loading states
 
   useEffect(() => {
     dispatch(dataLoading ? actions.START_LOADING : actions.STOP_LOADING);
@@ -98,11 +140,13 @@ const Course = _ref => {
 
 Course.propTypes = {
   dispatch: PropTypes.func,
+  onChange: PropTypes.func,
   onLoading: PropTypes.func,
   onLoaded: PropTypes.func
 };
 Course.defaultProps = {
   dispatch: () => {},
+  onChange: () => {},
   onLoading: () => {},
   onLoaded: () => {}
 };

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -31,6 +31,11 @@ import { ImageCropperModal } from '../ImageCropper';
 import ModeSelect from './ModeSelect';
 import PropTypes from 'prop-types';
 import { ImageCropperSettingsPropTypes } from '../ImageCropper/propTypes';
+import { MAX_IMAGE_SIZE_BYTES } from './compressionUtils';
+
+const getCompressionMessage = () => formatMessage('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {
+  size: MAX_IMAGE_SIZE_BYTES / 1024
+});
 
 function renderImagePreview(_ref) {
   let {
@@ -123,7 +128,9 @@ export const ImageOptions = _ref4 => {
       });
     },
     image: image,
-    cropSettings: state.cropperSettings
+    cropSettings: state.cropperSettings,
+    message: state.compressed ? getCompressionMessage() : null,
+    loading: !image
   })));
 };
 ImageOptions.propTypes = {
@@ -133,7 +140,8 @@ ImageOptions.propTypes = {
     mode: PropTypes.string.isRequired,
     loading: PropTypes.bool.isRequired,
     cropperOpen: PropTypes.bool.isRequired,
-    cropperSettings: ImageCropperSettingsPropTypes
+    cropperSettings: ImageCropperSettingsPropTypes,
+    compressed: PropTypes.bool.isRequired
   }).isRequired,
   dispatch: PropTypes.func.isRequired,
   rcsConfig: PropTypes.object.isRequired

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js

@@ -219,6 +219,7 @@ export const ImageSection = _ref => {
     dispatch: dispatch,
     editor: editor,
     data: state,
+    onChange: onChange,
     onLoading: scrollToBottom,
     onLoaded: scrollToBottom
   }))), state.icon && state.mode === modes.singleColorImages.type && /*#__PURE__*/React.createElement(Flex.Item, {

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGList.js

@@ -48,7 +48,7 @@ const SVGList = _ref => {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true,
+    wrap: "wrap",
     "data-testid": `${type}-svg-list`
   }, Object.keys(svgSourceList).map(iconName => /*#__PURE__*/React.createElement(Flex.Item, {
     key: iconName,

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.js

@@ -16,13 +16,67 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import { actions } from '../../../reducers/imageSection';
+import { actions as svgActions } from '../../../reducers/svgSettings';
 import { UploadFile } from '../../../../shared/Upload/UploadFile';
-export const onSubmit = dispatch => (_editor, _accept, _selectedPanel, uploadData) => {
+import { canCompressImage, compressImage, shouldCompressImage } from './compressionUtils';
+import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
+
+function dispatchCompressedImage(theFile, dispatch) {
+  dispatch({ ...actions.SET_IMAGE,
+    payload: ''
+  });
+  dispatch({ ...actions.SET_CROPPER_OPEN,
+    payload: true
+  });
+  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+    payload: false
+  });
+  return compressImage(theFile.preview).then(blob => {
+    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+      payload: true
+    });
+    dispatch({ ...actions.SET_IMAGE,
+      payload: blob
+    });
+    dispatch({ ...actions.SET_IMAGE_NAME,
+      payload: theFile.name
+    });
+  }).catch(() => {
+    // If compression fails, use the original one
+    // TODO: We can show the user that compression failed in some way
+    dispatch({ ...actions.SET_IMAGE,
+      payload: theFile.preview
+    });
+    dispatch({ ...actions.SET_IMAGE_NAME,
+      payload: theFile.name
+    });
+  });
+}
+
+export const onSubmit = (dispatch, onChange) => (_editor, _accept, _selectedPanel, uploadData) => {
   const {
     theFile
   } = uploadData;
+
+  if (isAnUnsupportedGifPngImage(theFile)) {
+    dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      payload: false
+    });
+    return onChange({
+      type: svgActions.SET_ERROR,
+      payload: formatMessage('GIF/PNG format images larger than {size} KB are not currently supported.', {
+        size: MAX_GIF_PNG_SIZE_BYTES / 1024
+      })
+    });
+  }
+
+  if (canCompressImage() && shouldCompressImage(theFile)) {
+    return dispatchCompressedImage(theFile, dispatch);
+  }
+
   dispatch({ ...actions.SET_IMAGE,
     payload: theFile.preview
   });
@@ -40,7 +94,8 @@ export const onSubmit = dispatch => (_editor, _accept, _selectedPanel, uploadDat
 const Upload = _ref => {
   let {
     editor,
-    dispatch
+    dispatch,
+    onChange
   } = _ref;
   return /*#__PURE__*/React.createElement(UploadFile, {
     accept: "image/*",
@@ -51,8 +106,17 @@ const Upload = _ref => {
       dispatch(actions.CLEAR_MODE);
     },
     requireA11yAttributes: false,
-    onSubmit: onSubmit(dispatch)
+    onSubmit: onSubmit(dispatch, onChange)
   });
 };
 
+Upload.propTypes = {
+  editor: PropTypes.object.isRequired,
+  dispatch: PropTypes.func,
+  onChange: PropTypes.func
+};
+Upload.defaultProps = {
+  dispatch: () => {},
+  onChange: () => {}
+};
 export default Upload;

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js

@@ -0,0 +1,83 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { PREVIEW_HEIGHT, PREVIEW_WIDTH } from '../ImageCropper/constants';
+const DEFAULT_TARGET_QUALITY = 0.75;
+export const MAX_IMAGE_SIZE_BYTES = 500 * 1024;
+
+function blobToBase64(blob) {
+  return new Promise(resolve => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => resolve(reader.result);
+
+    reader.readAsDataURL(blob);
+  });
+}
+
+function drawImageOnCanvasElement(image, quality, resolve, reject) {
+  const {
+    width,
+    height
+  } = image;
+  let compressedImageWidth, compressedImageHeight;
+
+  if (width > PREVIEW_WIDTH || height > PREVIEW_HEIGHT) {
+    if (width > height) {
+      compressedImageWidth = PREVIEW_WIDTH;
+      compressedImageHeight = compressedImageWidth * (height / width);
+    } else if (height > width) {
+      compressedImageHeight = PREVIEW_HEIGHT;
+      compressedImageWidth = compressedImageHeight * (width / height);
+    } else {
+      compressedImageWidth = compressedImageHeight = PREVIEW_HEIGHT;
+    }
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = compressedImageWidth;
+  canvas.height = compressedImageHeight;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(image, 0, 0, compressedImageWidth, compressedImageHeight);
+  canvas.toBlob(blob => blob ? resolve(blob) : reject(blob), 'image/jpeg', quality);
+}
+
+export function canCompressImage() {
+  // Some old browsers don't support toBlob
+  return Boolean(document.createElement('canvas').toBlob);
+}
+export function shouldCompressImage(_ref) {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff']).call(_context, type) && size > MAX_IMAGE_SIZE_BYTES;
+}
+export function compressImage(encodedImage) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = encodedImage;
+
+    image.onload = function () {
+      drawImageOnCanvasElement(image, DEFAULT_TARGET_QUALITY, resolve, reject);
+    };
+  }).then(blob => blobToBase64(blob));
+}

package/lib/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js

@@ -0,0 +1,29 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+export const MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
+export const isAnUnsupportedGifPngImage = _ref => {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/gif', 'image/png']).call(_context, type) && size > MAX_GIF_PNG_SIZE_BYTES;
+};