이정민

TuiImageEditor 객체

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;
......