[FEAT] : 다운로드 기능 추가

danbiilee · danbiilee · commit 9fcffcc4ebd6 · 2021-02-04T22:39:50.000+09:00
closed #3
diff --git a/src/components/common/FileUploader.js b/src/components/common/FileUploader.js
@@ -43,7 +43,7 @@ const FileUploader = () => {
   };
 
   return (
-    <Label htmlFor="file" aria-label="이미지 업로드">
+    <Label htmlFor="file" aria-label="업로드">
       <FileInput type="file" id="file" name="file" onChange={handelFile} ref={fileRef} />
       <SVG
         width="15"
diff --git a/src/components/common/Select.js b/src/components/common/Select.js
@@ -18,11 +18,9 @@ const Select = ({ data, onChange }) => {
     selectRef.current.size = 5;
   };
   const handleBlur = () => {
-    console.log('blur');
     selectRef.current.size = 1;
   };
   const handleChange = () => {
-    //resetSize();
     selectRef.current.blur();
   };
   useEffect(() => {
diff --git a/src/components/container/ImagesContainer.js b/src/components/container/ImagesContainer.js
@@ -85,6 +85,8 @@ const ImagesContainer = () => {
     [selectedList, dispatch],
   );
 
+  const onReset = () => setSelectedList([]);
+
   const onDelete = () => {
     dispatch(deletePicture(selectedList));
     dispatch(clearSelectedPictures());
@@ -97,6 +99,22 @@ const ImagesContainer = () => {
     setSelectedList([]);
   };
 
+  const onDownload = () => {
+    if (!selectedList.length) {
+      alert('⚠ 이미지를 선택해주세요 ⚠');
+      return;
+    }
+    if (selectedList.length > 1) {
+      alert('⚠ 한번에 하나의 이미지만 다운로드할 수 있습니다 ⚠');
+      return;
+    }
+
+    const link = document.createElement('a');
+    link.href = pictures.find(p => p.id === selectedList[0]).src;
+    link.download = 'awesome pictor.jpg';
+    link.click();
+  };
+
   const onCrop = () => {
     if (selectedList.length > 1) {
       alert('⚠ 한번에 하나의 이미지만 크롭할 수 있습니다 ⚠');
@@ -111,7 +129,10 @@ const ImagesContainer = () => {
       <TopButtons>
         <ButtonInner>
           <FileUploader />
-          <Button padding="5px" margin="0 5px 0 0" onClick={onDelete} aria-label="이미지 삭제">
+          <Button padding="5px" margin="0 5px 0 0" onClick={onDownload} aria-label="다운로드">
+            <SVG width="15" height="15" path="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z" />
+          </Button>
+          <Button padding="5px" margin="0 5px 0 0" onClick={onDelete} aria-label="삭제">
             <SVG
               width="15"
               height="15"
@@ -120,7 +141,14 @@ const ImagesContainer = () => {
           </Button>
         </ButtonInner>
         <ButtonInner>
-          <Button padding="5px" margin="0 5px 0 0" onClick={onCrop} aria-label="이미지 자르기">
+          <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>
+          <Button padding="5px" margin="0 5px 0 0" onClick={onCrop} aria-label="자르기">
             <SVG
               width="15"
               height="15"
diff --git a/src/components/container/PatternsContainer.js b/src/components/container/PatternsContainer.js
@@ -52,12 +52,12 @@ const SettingsContainer = () => {
 
   return (
     <>
-      <TopButtons>
+      <TopButtons flex="flex-end">
         <Button padding="5px" margin="0 5px 0 0" onClick={onReset} aria-label="설정 초기화">
           <SVG
             width="15"
             height="15"
-            path="M2.458 9.012c-.297.947-.458 1.955-.458 3 0 5.52 4.481 10 10 10 5.52 0 10-4.48 10-10 0-5.519-4.48-10-10-10-2.121 0-4.083.668-5.703 1.796l1.703 2.204h-6.58l1.935-6.012 1.718 2.223c1.958-1.389 4.346-2.211 6.927-2.211 6.623 0 12 5.377 12 12s-5.377 11.988-12 11.988-12-5.365-12-11.988c0-1.036.132-2.041.379-3h2.079zm10.35-3.012c.292.821.375 1.346 1.01 1.609.637.264 1.073-.052 1.854-.423l1.142 1.142c-.373.787-.687 1.218-.423 1.854.262.634.784.716 1.609 1.009v1.617c-.816.29-1.347.375-1.61 1.01-.264.636.052 1.071.424 1.853l-1.142 1.142c-.79-.375-1.219-.687-1.85-.424-.639.265-.723.793-1.014 1.611h-1.616c-.292-.821-.375-1.347-1.01-1.61-.637-.264-1.072.052-1.854.423l-1.142-1.142c.366-.771.689-1.212.423-1.854-.263-.635-.793-.719-1.609-1.009v-1.617c.817-.29 1.346-.373 1.609-1.009.264-.637-.051-1.07-.423-1.854l1.142-1.142c.788.374 1.218.687 1.854.423.635-.263.719-.792 1.01-1.609h1.616zm-.808 8c-1.105 0-2-.896-2-2 0-1.105.895-2.001 2-2.001 1.104 0 2 .896 2 2.001 0 1.104-.896 2-2 2z"
+            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>
diff --git a/src/components/layout/tabPanel/TopButtons.js b/src/components/layout/tabPanel/TopButtons.js
@@ -3,15 +3,15 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: ${props => (props.flex ? props.flex : 'space-between')};
   align-items: center;
   padding: 5px;
   border-bottom: 2px solid var(--border-light-gray);
 `;
 
-const TopButtons = ({ children }) => {
+const TopButtons = ({ flex, children }) => {
   //console.log('TopButtons');
-  return <Wrapper>{children}</Wrapper>;
+  return <Wrapper flex={flex}>{children}</Wrapper>;
 };
 
 export default TopButtons;
diff --git a/src/components/parts/Canvas.js b/src/components/parts/Canvas.js
@@ -29,7 +29,6 @@ const Canvas = ({ setMyCanvas }) => {
 
   // 캔버스 사이즈 변경
   const handleResize = () => {
-    console.log('handleResize', wrapperRef.current.offsetWidth);
     setCanvasSize({
       width: wrapperRef.current.offsetWidth,
       height: wrapperRef.current.offsetHeight - 1,
@@ -69,12 +68,12 @@ const Canvas = ({ setMyCanvas }) => {
     // myCanvas 생성
     const cropImgSrc = drawnPicture ? pictures.find(pic => pic.id === drawnPicture).src : null;
     my.current = new MyCanvas(wrapperRef.current, canvasRef.current, ctx.current, cropImgSrc);
-    my.current.initCropImage(); // 이미지 초기화
+    my.current.initImage(); // 이미지 초기화
     setMyCanvas(my.current);
 
     switch (canvasMode) {
       case 'crop':
-        console.log('crop!!!!');
+        //console.log('crop!!!!');
         my.current.drawnImg.onload = function () {
           my.current.drawImage(1.0);
         };
@@ -84,11 +83,11 @@ const Canvas = ({ setMyCanvas }) => {
         my.current.canvas.addEventListener('mousedown', mousedownRef.current);
         break;
       case 'pattern':
-        console.log('pattern!!!!');
+        //console.log('pattern!!!!');
         my.current.makePattern(properties);
         break;
       case 'clear':
-        console.log('clear!!!!');
+        //console.log('clear!!!!');
         // clear canvas
         my.current.clear();
         break;
diff --git a/src/lib/myCanvas.js b/src/lib/myCanvas.js
@@ -45,9 +45,9 @@ MyCanvas.prototype.clear = function () {
   this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 };
 
-// 크롭할 이미지 로드하기
-MyCanvas.prototype.initCropImage = function () {
-  //console.log('initCropImage', this.drawnImgSrc.substr(20, 30));
+// 이미지 로드하기
+MyCanvas.prototype.initImage = function () {
+  //console.log('initImage', this.drawnImgSrc.substr(20, 30));
   this.clear();
   this.drawnImg = new Image();
   this.drawnImg.src = this.drawnImgSrc;
@@ -169,7 +169,7 @@ MyCanvas.prototype.crop = function () {
   );
 
   // 새로운 이미지 생성. 기존 크롭이미지 대체
-  this.drawnImgSrc = c.toDataURL();
+  this.drawnImgSrc = c.toDataURL('image/png', 1);
   this.isCropped = !this.isCropped;
 
   // 이전 포인트 지우기
@@ -178,7 +178,7 @@ MyCanvas.prototype.crop = function () {
 
 MyCanvas.prototype.makePattern = function (props) {
   const myPattern = new MyPattern(this.wrapper, this.canvas, this.ctx, this.drawnImgSrc);
-  myPattern.initCropImage();
+  myPattern.initImage();
 
   // 설정값 초기화
   myPattern.setColor = props.color;
@@ -189,11 +189,12 @@ MyCanvas.prototype.makePattern = function (props) {
   myPattern.setGap = props.gap;
   myPattern.setType = props.type;
 
-  myPattern.makePattern();
+  // 이미지 저장 시 myCanvas.drawnImgSrc 참조하므로 getter로 src저장
+  this.drawnImgSrc = myPattern.getPatternSrc;
 
   // const my = this;
   // const img = new Image();
-  // img.src = c.toDataURL();
+  // img.src = c.toDataURL('image/jpeg');
   // img.onload = function () {
   //   // 새 이미지 페이지에 삽입하기
   //   my.wrapper.appendChild(this);
diff --git a/src/lib/myPattern.js b/src/lib/myPattern.js
@@ -37,16 +37,31 @@ export class MyPattern extends MyCanvas {
     this.type = value;
   }
 
-  drawBackgroundColor() {
-    this.ctx.beginPath();
-    this.ctx.fillStyle = this.color;
-    this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
-    this.ctx.closePath();
+  // src 리턴
+  get getPatternSrc() {
+    this.makePattern();
+
+    // 캔버스 생성
+    const c = document.createElement('canvas');
+    const cx = c.getContext('2d');
+    // 패턴 사이즈에 맞추기
+    c.width = this.canvasWidth;
+    c.height = this.canvasHeight;
+    cx.drawImage(
+      this.canvas,
+      0,
+      0,
+      this.canvasWidth,
+      this.canvasHeight,
+      0,
+      0,
+      this.canvasWidth,
+      this.canvasHeight,
+    );
+    return c.toDataURL('image/jpeg', 1);
   }
 
   makePattern() {
-    this.clear(); // 캔버스 초기화
-
     this.drawBackgroundColor(); // 배경색 그리기
 
     // 설정한 캔버스 사이즈만큼 context 크기 잘라두고 그 안에서 패턴 뿌림
@@ -79,7 +94,13 @@ export class MyPattern extends MyCanvas {
 
     // 그 뒤 다시 이전 context로 restore
     this.ctx.restore();
-    this.drawnImgSrc = this.canvas.toDataURL();
+  }
+
+  drawBackgroundColor() {
+    this.ctx.beginPath();
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.ctx.closePath();
   }
 
   getXVanilla(i) {
