Showing
1 changed file
with
128 additions
and
63 deletions
1 | import { useEffect, useRef, useState } from "react"; | 1 | import { useEffect, useRef, useState } from "react"; |
2 | -import { fabric } from "fabric"; | ||
3 | import styled from "styled-components"; | 2 | import styled from "styled-components"; |
4 | import { GifGenerator } from "gif-generator/src"; | 3 | import { GifGenerator } from "gif-generator/src"; |
5 | -import ImageEditor from "@toast-ui/react-image-editor"; | 4 | +import TuiImageEditor from "tui-image-editor"; |
6 | 5 | ||
7 | const GifEditor = ({ previewURL }) => { | 6 | const GifEditor = ({ previewURL }) => { |
8 | - const [canvas, setCanvas] = useState<HTMLCanvasElement>(); | 7 | + // const [canvas, setCanvas] = useState<HTMLCanvasElement>(); |
9 | - const [gifGenerator, setGifGenerator] = useState(null); | 8 | + // const [gifGenerator, setGifGenerator] = useState(null); |
9 | + const [imageEditor, setImageEditor] = useState(null); | ||
10 | + | ||
11 | + const rootEl = useRef(); | ||
10 | 12 | ||
11 | useEffect(() => { | 13 | useEffect(() => { |
14 | + // if (window) { | ||
15 | + // setCanvas( | ||
16 | + // document.getElementsByClassName( | ||
17 | + // "tui-image-editor-container" | ||
18 | + // )[0] as HTMLCanvasElement | ||
19 | + // ); | ||
20 | + // console.log( | ||
21 | + // document.getElementsByClassName( | ||
22 | + // "tui-image-editor-container" | ||
23 | + // )[0] as HTMLCanvasElement | ||
24 | + // ); | ||
25 | + // } | ||
26 | + | ||
12 | if (window) { | 27 | if (window) { |
13 | - setCanvas( | 28 | + setImageEditor( |
14 | - document.getElementsByClassName( | 29 | + new TuiImageEditor(rootEl.current, { |
15 | - "tui-image-editor-container" | 30 | + includeUI: { |
16 | - )[0] as HTMLCanvasElement | 31 | + loadImage: { |
32 | + path: previewURL, | ||
33 | + name: "SampleImage", | ||
34 | + }, | ||
35 | + uiSize: { | ||
36 | + width: "100%", | ||
37 | + height: "600px", | ||
38 | + }, | ||
39 | + initMenu: "filter", | ||
40 | + menuBarPosition: "bottom", | ||
41 | + }, | ||
42 | + cssMaxWidth: 500, | ||
43 | + cssMaxHeight: 700, | ||
44 | + usageStatistics: false, | ||
45 | + }) | ||
17 | ); | 46 | ); |
18 | } | 47 | } |
19 | }, []); | 48 | }, []); |
20 | - console.log( | ||
21 | - "asdf", | ||
22 | - document.getElementsByClassName("tui-image-editor-container") | ||
23 | - ); | ||
24 | - console.log("canvas", canvas); | ||
25 | - console.log('useref',useRef.arguments) | ||
26 | 49 | ||
27 | - useEffect(()=>{ | 50 | + useEffect(() => { |
28 | - if(canvas)setGifGenerator(new GifGenerator(canvas._graphics.getCanvas())); | 51 | + if (imageEditor) { |
29 | - }, [canvas]) | 52 | + // setGifGenerator(new GifGenerator(imageEditor._graphics.getCanvas())); |
53 | + console.log(imageEditor._graphics.getCanvas().getObjects()); | ||
54 | + } | ||
55 | + }, [imageEditor]); | ||
56 | + | ||
57 | + const render = () => { | ||
58 | + console.log("aaa", imageEditor._graphics.getCanvas().getObjects()); | ||
59 | + const gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); | ||
60 | + gifGenerator.make().then( | ||
61 | + (blob) => { | ||
62 | + window.open(window.URL.createObjectURL(blob)); | ||
63 | + }, | ||
64 | + (error) => { | ||
65 | + alert(error); | ||
66 | + } | ||
67 | + ); | ||
68 | + }; | ||
69 | + | ||
70 | + // useEffect(() => { | ||
71 | + // // if (canvas) setGifGenerator(new GifGenerator(canvas._graphics.getCanvas())); | ||
72 | + // if (canvas) { | ||
73 | + // console.log("aaaaa", canvas); | ||
74 | + // } | ||
75 | + // }, [canvas]); | ||
76 | + | ||
77 | + // useEffect(() => { | ||
78 | + // if (window) { | ||
79 | + // setCanvas(document.getElementById("gif-canvas") as HTMLCanvasElement); | ||
80 | + // } | ||
81 | + // }, []); | ||
30 | 82 | ||
31 | // useEffect(() => { | 83 | // useEffect(() => { |
32 | // // const img = lowerCanvas?.toDataURL("image/png"); | 84 | // // const img = lowerCanvas?.toDataURL("image/png"); |
... | @@ -43,7 +95,7 @@ const GifEditor = ({ previewURL }) => { | ... | @@ -43,7 +95,7 @@ const GifEditor = ({ previewURL }) => { |
43 | // image.src = previewURL; | 95 | // image.src = previewURL; |
44 | // console.log("canvascontext", canvas?.getContext); | 96 | // console.log("canvascontext", canvas?.getContext); |
45 | // if (canvas?.getContext) { | 97 | // if (canvas?.getContext) { |
46 | - // console.log('왜안돼') | 98 | + // console.log("왜안돼"); |
47 | // image.onload = function () { | 99 | // image.onload = function () { |
48 | // canvas.width = 1000; | 100 | // canvas.width = 1000; |
49 | // canvas.height = 572; | 101 | // canvas.height = 572; |
... | @@ -53,55 +105,47 @@ const GifEditor = ({ previewURL }) => { | ... | @@ -53,55 +105,47 @@ const GifEditor = ({ previewURL }) => { |
53 | // } | 105 | // } |
54 | // }, [canvas]); | 106 | // }, [canvas]); |
55 | 107 | ||
56 | - const render = () => { | ||
57 | - gifGenerator.make().then( | ||
58 | - (blob) => { | ||
59 | - window.open(window.URL.createObjectURL(blob)); | ||
60 | - }, | ||
61 | - (error) => { | ||
62 | - alert(error); | ||
63 | - } | ||
64 | - ); | ||
65 | - }; | ||
66 | - | ||
67 | return ( | 108 | return ( |
68 | - <Container> | 109 | + <> |
69 | - <div onClick={render} className="upload"> | 110 | + <Wrapper> |
70 | - Save | 111 | + <div onClick={render} className="upload"> |
71 | - </div> | 112 | + Save |
72 | - <ImageEditor | 113 | + </div> |
73 | - includeUI={{ | 114 | + {/* <ImageEditor |
74 | - loadImage: { | 115 | + includeUI={{ |
75 | - path: previewURL, | 116 | + loadImage: { |
76 | - name: "SampleImage", | 117 | + path: previewURL, |
77 | - }, | 118 | + name: "SampleImage", |
78 | - menu: ["draw", "text"], | 119 | + }, |
79 | - initMenu: "draw", | 120 | + menu: ["draw", "text"], |
80 | - uiSize: { | 121 | + initMenu: "draw", |
81 | - width: "100%", | 122 | + uiSize: { |
82 | - height: "600px", | 123 | + width: "100%", |
83 | - }, | 124 | + height: "600px", |
84 | - menuBarPosition: "bottom", | 125 | + }, |
85 | - }} | 126 | + menuBarPosition: "bottom", |
86 | - cssMaxHeight={500} | 127 | + }} |
87 | - cssMaxWidth={700} | 128 | + cssMaxHeight={500} |
88 | - selectionStyle={{ | 129 | + cssMaxWidth={700} |
89 | - cornerSize: 20, | 130 | + selectionStyle={{ |
90 | - rotatingPointOffset: 70, | 131 | + cornerSize: 20, |
91 | - }} | 132 | + rotatingPointOffset: 70, |
92 | - usageStatistics={true} | 133 | + }} |
93 | - /> | 134 | + usageStatistics={true} |
94 | - <div className="alert">Please select a photo.</div> | 135 | + /> */} |
95 | - </Container> | 136 | + <div ref={rootEl} /> |
96 | - // <Container> | 137 | + <div className="alert">Please select a photo.</div> |
97 | - // <ImgBox> | 138 | + </Wrapper> |
98 | - // <canvas id="gif-canvas" /> | 139 | + {/* <Container> |
99 | - // </ImgBox> | 140 | + <ImgBox> |
100 | - // </Container> | 141 | + <canvas id="gif-canvas" /> |
142 | + </ImgBox> | ||
143 | + </Container> */} | ||
144 | + </> | ||
101 | ); | 145 | ); |
102 | }; | 146 | }; |
103 | 147 | ||
104 | -const Container = styled.div` | 148 | +const Wrapper = styled.div` |
105 | position: fixed; | 149 | position: fixed; |
106 | width: 90%; | 150 | width: 90%; |
107 | top: 10rem; | 151 | top: 10rem; |
... | @@ -145,4 +189,25 @@ const Container = styled.div` | ... | @@ -145,4 +189,25 @@ const Container = styled.div` |
145 | } | 189 | } |
146 | `; | 190 | `; |
147 | 191 | ||
192 | +const Container = styled.div` | ||
193 | + width: 100%; | ||
194 | + display: flex; | ||
195 | + justify-content: center; | ||
196 | + margin-top: 10rem; | ||
197 | +`; | ||
198 | +const ImgBox = styled.div` | ||
199 | + position: relative; | ||
200 | + width: 90%; | ||
201 | + background-color: white; | ||
202 | + box-shadow: ${({ theme }) => theme.boxShadow.normal}; | ||
203 | + border-radius: 2rem; | ||
204 | + margin-top: 2rem; | ||
205 | + display: flex; | ||
206 | + align-items: center; | ||
207 | + justify-content: center; | ||
208 | + font-size: 1rem; | ||
209 | + display: flex; | ||
210 | + padding: 1rem 0; | ||
211 | +`; | ||
212 | + | ||
148 | export default GifEditor; | 213 | export default GifEditor; | ... | ... |
-
Please register or login to post a comment