2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
a22b69f6 1 parent 6e965fe1

코드 정리

Inline Side-by-side
Showing 5 changed files with 11 additions and 324 deletions
...@@ -2,11 +2,15 @@ import { useEffect, useRef, useState } from "react"; ...@@ -2,11 +2,15 @@ import { useEffect, useRef, useState } from "react";
2 import styled from "styled-components"; 2 import styled from "styled-components";
3 import TuiImageEditor from "tui-image-editor"; 3 import TuiImageEditor from "tui-image-editor";
4 import "gif-generator/dist/gif-generator"; 4 import "gif-generator/dist/gif-generator";
5 -import { getGif, postGif } from "api"; 5 +import { postGif } from "api";
6 +
7 +declare global {
8 + interface Window {
9 + GifGenerator: any;
10 + }
11 +}
6 12
7 const GifEditor = ({ previewURL }) => { 13 const GifEditor = ({ previewURL }) => {
8 - // const [canvas, setCanvas] = useState<HTMLCanvasElement>();
9 - // const [gifGenerator, setGifGenerator] = useState(null);
10 const [imageEditor, setImageEditor] = useState(null); 14 const [imageEditor, setImageEditor] = useState(null);
11 15
12 const rootEl = useRef(); 16 const rootEl = useRef();
...@@ -15,19 +19,6 @@ const GifEditor = ({ previewURL }) => { ...@@ -15,19 +19,6 @@ const GifEditor = ({ previewURL }) => {
15 const [blob, setBlob] = useState(null); 19 const [blob, setBlob] = useState(null);
16 20
17 useEffect(() => { 21 useEffect(() => {
18 - // if (window) {
19 - // setCanvas(
20 - // document.getElementsByClassName(
21 - // "tui-image-editor-container"
22 - // )[0] as HTMLCanvasElement
23 - // );
24 - // console.log(
25 - // document.getElementsByClassName(
26 - // "tui-image-editor-container"
27 - // )[0] as HTMLCanvasElement
28 - // );
29 - // }
30 -
31 if (window) { 22 if (window) {
32 setImageEditor( 23 setImageEditor(
33 new TuiImageEditor(rootEl.current, { 24 new TuiImageEditor(rootEl.current, {
...@@ -53,14 +44,15 @@ const GifEditor = ({ previewURL }) => { ...@@ -53,14 +44,15 @@ const GifEditor = ({ previewURL }) => {
53 44
54 useEffect(() => { 45 useEffect(() => {
55 if (imageEditor) { 46 if (imageEditor) {
56 - // setGifGenerator(new GifGenerator(imageEditor._graphics.getCanvas()));
57 console.log(imageEditor._graphics.getCanvas().getObjects()); 47 console.log(imageEditor._graphics.getCanvas().getObjects());
58 } 48 }
59 }, [imageEditor]); 49 }, [imageEditor]);
60 50
61 const render = () => { 51 const render = () => {
62 console.log("aaa", imageEditor._graphics.getCanvas().getObjects()); 52 console.log("aaa", imageEditor._graphics.getCanvas().getObjects());
63 - const gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); 53 + const gifGenerator = new window.GifGenerator(
54 + imageEditor._graphics.getCanvas()
55 + );
64 gifGenerator.make().then( 56 gifGenerator.make().then(
65 (blob) => { 57 (blob) => {
66 setBlob(blob); 58 setBlob(blob);
...@@ -73,45 +65,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -73,45 +65,7 @@ const GifEditor = ({ previewURL }) => {
73 } 65 }
74 ); 66 );
75 }; 67 };
76 - //localhost:3000/f431b497-4ece-46d4-8708-8b1703d21b6e
77 -
78 - // useEffect(() => {
79 - // // if (canvas) setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
80 - // if (canvas) {
81 - // console.log("aaaaa", canvas);
82 - // }
83 - // }, [canvas]);
84 -
85 - // useEffect(() => {
86 - // if (window) {
87 - // setCanvas(document.getElementById("gif-canvas") as HTMLCanvasElement);
88 - // }
89 - // }, []);
90 68
91 - // useEffect(() => {
92 - // // const img = lowerCanvas?.toDataURL("image/png");
93 - // // const uploaded = document.getElementById("image");
94 - // // console.log(uploaded);
95 - // // let w = window.open();
96 - // // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
97 - // const image = new Image();
98 - // // image.onload = function () {
99 - // // lowerCanvas.width = uploaded.clientWidth;
100 - // // lowerCanvas.height = uploaded.clientHeight;
101 - // // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
102 - // // };
103 - // image.src = previewURL;
104 - // console.log("canvascontext", canvas?.getContext);
105 - // if (canvas?.getContext) {
106 - // console.log("왜안돼");
107 - // image.onload = function () {
108 - // canvas.width = 1000;
109 - // canvas.height = 572;
110 - // canvas?.getContext("2d").drawImage(image, 0, 0);
111 - // };
112 - // // console.log(canvas.getContext("2d"));
113 - // }
114 - // }, [canvas]);
115 const handleUpload = async () => { 69 const handleUpload = async () => {
116 const file = new File([blob], "file.gif"); 70 const file = new File([blob], "file.gif");
117 const formData = new FormData(); 71 const formData = new FormData();
...@@ -134,36 +88,9 @@ const GifEditor = ({ previewURL }) => { ...@@ -134,36 +88,9 @@ const GifEditor = ({ previewURL }) => {
134 <div onClick={render} className="upload"> 88 <div onClick={render} className="upload">
135 Save 89 Save
136 </div> 90 </div>
137 - {/* <ImageEditor
138 - includeUI={{
139 - loadImage: {
140 - path: previewURL,
141 - name: "SampleImage",
142 - },
143 - menu: ["draw", "text"],
144 - initMenu: "draw",
145 - uiSize: {
146 - width: "100%",
147 - height: "600px",
148 - },
149 - menuBarPosition: "bottom",
150 - }}
151 - cssMaxHeight={500}
152 - cssMaxWidth={700}
153 - selectionStyle={{
154 - cornerSize: 20,
155 - rotatingPointOffset: 70,
156 - }}
157 - usageStatistics={true}
158 - /> */}
159 <div ref={rootEl} /> 91 <div ref={rootEl} />
160 <div className="alert">Please select a photo.</div> 92 <div className="alert">Please select a photo.</div>
161 </Wrapper> 93 </Wrapper>
162 - {/* <Container>
163 - <ImgBox>
164 - <canvas id="gif-canvas" />
165 - </ImgBox>
166 - </Container> */}
167 </> 94 </>
168 ); 95 );
169 }; 96 };
...@@ -212,25 +139,4 @@ const Wrapper = styled.div` ...@@ -212,25 +139,4 @@ const Wrapper = styled.div`
212 } 139 }
213 `; 140 `;
214 141
215 -const Container = styled.div`
216 - width: 100%;
217 - display: flex;
218 - justify-content: center;
219 - margin-top: 10rem;
220 -`;
221 -const ImgBox = styled.div`
222 - position: relative;
223 - width: 90%;
224 - background-color: white;
225 - box-shadow: ${({ theme }) => theme.boxShadow.normal};
226 - border-radius: 2rem;
227 - margin-top: 2rem;
228 - display: flex;
229 - align-items: center;
230 - justify-content: center;
231 - font-size: 1rem;
232 - display: flex;
233 - padding: 1rem 0;
234 -`;
235 -
236 export default GifEditor; 142 export default GifEditor;
......
1 -import dynamic from "next/dynamic";
2 -import { useState } from "react";
3 -import styled from "styled-components";
4 -
5 -const ToastEditor = dynamic(() => import("components/ToastEditor"), {
6 - ssr: false,
7 -});
8 -const Image = ({ previewURL, setPreviewURL }) => {
9 - const [file, setFile] = useState(undefined);
10 - // console.log("previewURL", previewURL);
11 -
12 - // const uploadImage = (file) => {
13 - // if (!file) {
14 - // return;
15 - // }
16 - // };
17 -
18 - // const selectImg = (e) => {
19 - // const reader = new FileReader();
20 - // const targetFile = e.target.files[0];
21 - // setFile(targetFile);
22 - // // uploadImage(targetFile);
23 -
24 - // reader.onloadend = () => {
25 - // setPreviewURL(reader.result);
26 - // };
27 -
28 - // reader.readAsDataURL(targetFile);
29 - // };
30 -
31 - // const [isEditorOpened, setIsEditorOpened] = useState(false);
32 - // const handleEditor = () => {
33 - // setIsEditorOpened(true);
34 - // };
35 -
36 - return (
37 - <>
38 - <Container>
39 - <ImgBox>
40 - {/* <div onClick={handleEditor}>asdf</div> */}
41 - {/* {file === undefined ? ( */}
42 - <>
43 - {/* <div className="sub-flex">
44 - <BlankBox />
45 - <div>Click to add a photo</div>
46 - <input
47 - type="file"
48 - style={{
49 - position: "absolute",
50 - top: 0,
51 - paddingLeft: 0,
52 - zIndex: 0,
53 - width: "90%",
54 - height: "100%",
55 - border: "none",
56 - cursor: "pointer",
57 - outline: "none",
58 - }}
59 - onChange={selectImg}
60 - />
61 - </div>
62 - <div className="sub-flex">Open Image Editor</div> */}
63 - </>
64 - {/* ) : ( */}
65 - <img
66 - id="image"
67 - alt={""}
68 - style={{
69 - objectFit: "cover",
70 - display: "flex",
71 - maxHeight: "90%",
72 - maxWidth: "90%",
73 - }}
74 - src={previewURL as string}
75 - />
76 - {/* )} */}
77 - </ImgBox>
78 - {/* <Menu /> */}
79 - </Container>
80 - {/* {isEditorOpened && <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />} */}
81 - </>
82 - );
83 -};
84 -
85 -const Menu = () => {
86 - return (
87 - <div style={{ width: "15rem", marginLeft: "2rem" }}>
88 - <Box />
89 - <Box />
90 - <Box />
91 - <Box />
92 - </div>
93 - );
94 -};
95 -
96 -const Container = styled.div`
97 - width: 100%;
98 - display: flex;
99 - justify-content: center;
100 - margin-top: 10rem;
101 -`;
102 -const ImgBox = styled.div`
103 - position: relative;
104 - width: 90%;
105 - /* height: 30rem; */
106 - background-color: white;
107 - box-shadow: ${({ theme }) => theme.boxShadow.normal};
108 - border-radius: 2rem;
109 - margin-top: 2rem;
110 - display: flex;
111 - align-items: center;
112 - justify-content: center;
113 - font-size: 1rem;
114 - display: flex;
115 - /* flex: 0.6; */
116 - padding: 1rem 0;
117 - /* .sub-flex {
118 - position: relative;
119 - width: 100%;
120 - height: 100%;
121 - display: flex;
122 - align-items: center;
123 - justify-content: center;
124 - :first-child {
125 - border-right: 1px solid ${({ theme }) => theme.color.gray};
126 - }
127 - } */
128 -`;
129 -
130 -const Box = styled.div`
131 - width: 100%;
132 - height: 10rem;
133 - margin-top: 2rem;
134 - border-radius: 1rem;
135 - background-color: white;
136 - box-shadow: ${({ theme }) => theme.boxShadow.normal};
137 -`;
138 -
139 -
140 -export default Image;
1 /// <reference path="react-image-editor.d.ts" /> 1 /// <reference path="react-image-editor.d.ts" />
2 import ImageEditor from "@toast-ui/react-image-editor"; 2 import ImageEditor from "@toast-ui/react-image-editor";
3 -import { useEffect, useState } from "react"; 3 +import { useState } from "react";
4 import styled from "styled-components"; 4 import styled from "styled-components";
5 import "tui-image-editor/dist/tui-image-editor.css"; 5 import "tui-image-editor/dist/tui-image-editor.css";
6 -import { GifGenerator } from "gif-generator/src/index";
7 6
8 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { 7 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
9 - // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
10 - // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
11 - // // console.log(
12 - // // document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
13 - // // );
14 - // console.log("s");
15 -
16 - // // const [upperCanvas, setUpperCanvas] = useState(
17 - // // document.getElementsByClassName("upper-canvas ")[0]
18 - // // );
19 -
20 - // useEffect(() => {
21 - // window?.addEventListener("click", () => {
22 - // setLowerCanvas(
23 - // document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
24 - // );
25 - // setUpperCanvas(
26 - // document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
27 - // );
28 - // });
29 - // }, []);
30 -
31 - // useEffect(() => {
32 - // const img = lowerCanvas?.toDataURL("image/png");
33 - // const uploaded = document.getElementById("image");
34 - // console.log(uploaded);
35 - // // let w = window.open();
36 - // // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
37 - // const image = new Image();
38 - // // image.onload = function () {
39 - // // lowerCanvas.width = uploaded.clientWidth;
40 - // // lowerCanvas.height = uploaded.clientHeight;
41 - // // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
42 - // // };
43 - // image.src = previewURL;
44 - // console.log("b");
45 - // if (lowerCanvas?.getContext&&upperCanvas?.getContext) {
46 - // image.onload = function () {
47 -
48 - // lowerCanvas.width = 1000;
49 - // lowerCanvas.height = 572;
50 - // upperCanvas.width = 1000;
51 - // upperCanvas.height = 572;
52 - // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
53 - // };
54 - // console.log(lowerCanvas.getContext("2d"));
55 - // }
56 - // }, [lowerCanvas?.toDataURL("image/png")]);
57 -
58 const [alertIsShown, setAlertIsShown] = useState(false); 8 const [alertIsShown, setAlertIsShown] = useState(false);
59 9
60 const handleEnd = () => { 10 const handleEnd = () => {
...@@ -76,30 +26,6 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -76,30 +26,6 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
76 } 26 }
77 }; 27 };
78 28
79 - // console.log('asdf',document
80 - // .getElementsByClassName("tui-image-editor-container"))
81 -
82 - // window.GifGenerator = GifGenerator;
83 -
84 - // let gifGenerator;
85 - // setTimeout(function () {
86 - // gifGenerator = new GifGenerator(
87 - // document
88 - // .getElementsByClassName("tui-image-editor-container")
89 - // ._graphics.getCanvas()
90 - // );
91 - // }, 1000);
92 - // function render() {
93 - // gifGenerator.make().then(
94 - // (blob) => {
95 - // window.open(window.URL.createObjectURL(blob));
96 - // },
97 - // (error) => {
98 - // alert(error);
99 - // }
100 - // );
101 - // }
102 -
103 return ( 29 return (
104 <Container> 30 <Container>
105 <div onClick={handleEnd} className="upload"> 31 <div onClick={handleEnd} className="upload">
...@@ -108,10 +34,8 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -108,10 +34,8 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
108 <ImageEditor 34 <ImageEditor
109 includeUI={{ 35 includeUI={{
110 loadImage: { 36 loadImage: {
111 - // path: 'img/sampleImage.jpg',
112 name: "SampleImage", 37 name: "SampleImage",
113 }, 38 },
114 - // theme: myTheme,
115 initMenu: "filter", 39 initMenu: "filter",
116 uiSize: { 40 uiSize: {
117 width: "100%", 41 width: "100%",
......
1 -import { getGif } from "api";
2 import { useRouter } from "next/dist/client/router"; 1 import { useRouter } from "next/dist/client/router";
3 -import { useEffect, useState } from "react";
4 2
5 const Detail = () => { 3 const Detail = () => {
6 const id = useRouter().query.id; 4 const id = useRouter().query.id;
......
1 import Header from "components/Header"; 1 import Header from "components/Header";
2 -import Image from "components/Image";
3 import styled from "styled-components"; 2 import styled from "styled-components";
4 import dynamic from "next/dynamic"; 3 import dynamic from "next/dynamic";
5 import { useState } from "react"; 4 import { useState } from "react";
......