[FEAT] #2 : 크롭 이미지 업로드 기능 추가

- 최대 300 * 300 에 맞춰 리사이즈 후 업로드
danbiilee · Feb 4, 2021 · 20556dc · 20556dc
1 parent 9fcffcc
commit 20556dc
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 15 deletions.
diff --git a/src/components/common/FileUploader.js b/src/components/common/FileUploader.js
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { addPicture } from '../../redux/pictures';
 import styled from 'styled-components';
 
@@ -29,17 +29,64 @@ const Label = styled.label`
 
 const FileUploader = () => {
   //console.log('FileUploader');
-
+  const { canvasMode } = useSelector(state => state.pictures);
+  const type = canvasMode === 'pattern' ? 'crop' : 'origin';
   const fileRef = useRef();
   const dispatch = useDispatch();
 
+  const resizeImgae = (width, height) => {
+    // 이미지 리사이즈
+    const MAX_WIDTH = 300;
+    const MAX_HEIGHT = 300;
+    if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
+      return { width, height };
+    }
+
+    if (width > height) {
+      // landscape
+      if (width > MAX_WIDTH) {
+        height *= MAX_WIDTH / width;
+        width = MAX_WIDTH;
+      }
+    } else {
+      // portrait
+      if (height > MAX_HEIGHT) {
+        width *= MAX_HEIGHT / height;
+        height = MAX_HEIGHT;
+      }
+    }
+    return { width, height };
+  };
+
+  const getResizedSrc = (img, w, h) => {
+    const c = document.createElement('canvas');
+    const ctx = c.getContext('2d');
+    c.width = w;
+    c.height = h;
+    ctx.drawImage(img, 0, 0, w, h);
+    return c.toDataURL('image/png', 1);
+  };
+
   const handelFile = e => {
-    let reader = new FileReader();
+    const reader = new FileReader();
     reader.readAsDataURL(e.target.files[0]);
-    reader.addEventListener('load', () =>
-      dispatch(addPicture({ type: 'origin', src: reader.result })),
-    ); // 바로 indexedDB에 저장
-    fileRef.current.value = '';
+    reader.addEventListener('load', () => {
+      let src = reader.result;
+      if (canvasMode !== 'pattern') {
+        dispatch(addPicture({ type, src })); // indexedDB에 저장
+        return;
+      }
+
+      // 크롭 사이즈로 src 재생성 후 저장
+      const img = new Image();
+      img.onload = function () {
+        const { width, height } = resizeImgae(img.width, img.height);
+        src = getResizedSrc(this, width, height);
+        dispatch(addPicture({ type, src }));
+      };
+      img.src = src;
+    });
+    //fileRef.current.value = '';
   };
 
   return (

diff --git a/src/components/container/PatternsContainer.js b/src/components/container/PatternsContainer.js
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import styled from 'styled-components';
 import { changeProperties, initialData } from '../../redux/pictures';
 
 import SVG from '../common/SVG';
@@ -13,6 +14,12 @@ import SetCVSize from '../parts/pattern/SetCVSize';
 import SetImgSize from '../parts/pattern/SetImgSize';
 import SetGapSize from '../parts/pattern/SetGapSize';
 import SetType from '../parts/pattern/SetType';
+import FileUploader from '../common/FileUploader';
+
+const ButtonInner = styled.div`
+  display: flex;
+  align-items: center;
+`;
 
 const SettingsContainer = () => {
   const dispatch = useDispatch();
@@ -52,14 +59,19 @@ const SettingsContainer = () => {
 
   return (
     <>
-      <TopButtons flex="flex-end">
-        <Button padding="5px" margin="0 5px 0 0" onClick={onReset} aria-label="설정 초기화">
-          <SVG
-            width="15"
-            height="15"
-            path="M18.885 3.515c-4.617-4.618-12.056-4.676-16.756-.195l-2.129-2.258v7.938h7.484l-2.066-2.191c2.82-2.706 7.297-2.676 10.073.1 4.341 4.341 1.737 12.291-5.491 12.291v4.8c3.708 0 6.614-1.244 8.885-3.515 4.686-4.686 4.686-12.284 0-16.97z"
-          />
-        </Button>
+      <TopButtons>
+        <ButtonInner>
+          <FileUploader />
+        </ButtonInner>
+        <ButtonInner>
+          <Button padding="5px" margin="0 5px 0 0" onClick={onReset} aria-label="설정 초기화">
+            <SVG
+              width="15"
+              height="15"
+              path="M18.885 3.515c-4.617-4.618-12.056-4.676-16.756-.195l-2.129-2.258v7.938h7.484l-2.066-2.191c2.82-2.706 7.297-2.676 10.073.1 4.341 4.341 1.737 12.291-5.491 12.291v4.8c3.708 0 6.614-1.244 8.885-3.515 4.686-4.686 4.686-12.284 0-16.97z"
+            />
+          </Button>
+        </ButtonInner>
       </TopButtons>
       <Content>
         <SetColor