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; | ... | ... |
src/components/Image.tsx
deleted
100644 → 0
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"; | ... | ... |
-
Please register or login to post a comment