2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
68a14a72 1 parent 3f2e8536

이미지 편집 후 generator로 이동 구현

Inline Side-by-side
Showing 5 changed files with 152 additions and 67 deletions
1 -import { useEffect, useState } from "react"; 1 +import { useEffect, useRef, useState } from "react";
2 import { fabric } from "fabric"; 2 import { fabric } from "fabric";
3 import styled from "styled-components"; 3 import styled from "styled-components";
4 +import { GifGenerator } from "gif-generator/src";
5 +import ImageEditor from "@toast-ui/react-image-editor";
4 6
5 const GifEditor = ({ previewURL }) => { 7 const GifEditor = ({ previewURL }) => {
6 const [canvas, setCanvas] = useState<HTMLCanvasElement>(); 8 const [canvas, setCanvas] = useState<HTMLCanvasElement>();
9 + const [gifGenerator, setGifGenerator] = useState(null);
7 10
8 useEffect(() => { 11 useEffect(() => {
9 if (window) { 12 if (window) {
10 - setCanvas(document.getElementById("gif-canvas") as HTMLCanvasElement); 13 + setCanvas(
14 + document.getElementsByClassName(
15 + "tui-image-editor-container"
16 + )[0] as HTMLCanvasElement
17 + );
11 } 18 }
12 }, []); 19 }, []);
20 + console.log(
21 + "asdf",
22 + document.getElementsByClassName("tui-image-editor-container")
23 + );
24 + console.log("canvas", canvas);
25 + console.log('useref',useRef.arguments)
13 26
14 - useEffect(() => { 27 + useEffect(()=>{
15 - // const img = lowerCanvas?.toDataURL("image/png"); 28 + if(canvas)setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
16 - // const uploaded = document.getElementById("image"); 29 + }, [canvas])
17 - // console.log(uploaded); 30 +
18 - // let w = window.open(); 31 + // useEffect(() => {
19 - // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>"; 32 + // // const img = lowerCanvas?.toDataURL("image/png");
20 - const image = new Image(); 33 + // // const uploaded = document.getElementById("image");
21 - // image.onload = function () { 34 + // // console.log(uploaded);
22 - // lowerCanvas.width = uploaded.clientWidth; 35 + // // let w = window.open();
23 - // lowerCanvas.height = uploaded.clientHeight; 36 + // // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
24 - // lowerCanvas?.getContext("2d").drawImage(image, 0, 0); 37 + // const image = new Image();
25 - // }; 38 + // // image.onload = function () {
26 - console.log("fdasdafs", previewURL); 39 + // // lowerCanvas.width = uploaded.clientWidth;
27 - image.src = previewURL; 40 + // // lowerCanvas.height = uploaded.clientHeight;
28 - console.log("canvas", canvas); 41 + // // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
29 - if (canvas?.getContext) { 42 + // // };
30 - image.onload = function () { 43 + // image.src = previewURL;
31 - canvas.width = 1000; 44 + // console.log("canvascontext", canvas?.getContext);
32 - canvas.height = 572; 45 + // if (canvas?.getContext) {
33 - canvas?.getContext("2d").drawImage(image, 0, 0); 46 + // console.log('왜안돼')
34 - }; 47 + // image.onload = function () {
35 - console.log(canvas.getContext("2d")); 48 + // canvas.width = 1000;
36 - } 49 + // canvas.height = 572;
37 - }, [canvas]); 50 + // canvas?.getContext("2d").drawImage(image, 0, 0);
51 + // };
52 + // // console.log(canvas.getContext("2d"));
53 + // }
54 + // }, [canvas]);
55 +
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 + };
38 66
39 return ( 67 return (
40 <Container> 68 <Container>
41 - <ImgBox> 69 + <div onClick={render} className="upload">
42 - <canvas id="gif-canvas" /> 70 + Save
43 - </ImgBox> 71 + </div>
72 + <ImageEditor
73 + includeUI={{
74 + loadImage: {
75 + path: previewURL,
76 + name: "SampleImage",
77 + },
78 + menu: ["draw", "text"],
79 + initMenu: "draw",
80 + uiSize: {
81 + width: "100%",
82 + height: "600px",
83 + },
84 + menuBarPosition: "bottom",
85 + }}
86 + cssMaxHeight={500}
87 + cssMaxWidth={700}
88 + selectionStyle={{
89 + cornerSize: 20,
90 + rotatingPointOffset: 70,
91 + }}
92 + usageStatistics={true}
93 + />
94 + <div className="alert">Please select a photo.</div>
44 </Container> 95 </Container>
96 + // <Container>
97 + // <ImgBox>
98 + // <canvas id="gif-canvas" />
99 + // </ImgBox>
100 + // </Container>
45 ); 101 );
46 }; 102 };
47 103
48 const Container = styled.div` 104 const Container = styled.div`
49 - width: 100%; 105 + position: fixed;
50 - display: flex;
51 - justify-content: center;
52 - margin-top: 10rem;
53 -`;
54 -const ImgBox = styled.div`
55 - position: relative;
56 width: 90%; 106 width: 90%;
57 - background-color: white; 107 + top: 10rem;
108 + border-radius: 1.5rem;
58 box-shadow: ${({ theme }) => theme.boxShadow.normal}; 109 box-shadow: ${({ theme }) => theme.boxShadow.normal};
59 - border-radius: 2rem;
60 - margin-top: 2rem;
61 display: flex; 110 display: flex;
111 + flex-direction: column;
62 align-items: center; 112 align-items: center;
63 - justify-content: center; 113 + .upload {
64 - font-size: 1rem; 114 + font: 800 11.5px Arial;
65 - display: flex; 115 + position: absolute;
66 - padding: 1rem 0; 116 + right: 0;
117 + top: 0;
118 + width: 120px;
119 + height: 40px;
120 + background: red;
121 + z-index: 10;
122 + border-radius: 20px;
123 + margin: 8px;
124 + background-color: #fdba3b;
125 + display: flex;
126 + align-items: center;
127 + justify-content: center;
128 + cursor: pointer;
129 + }
130 + .alert {
131 + position: fixed;
132 + border-radius: 0.5rem;
133 + transition: 1s;
134 + top: 7rem;
135 + }
136 + .tui-image-editor-container {
137 + border-radius: 1.5rem;
138 + }
139 + .tui-image-editor-container .tui-image-editor-help-menu.top {
140 + left: 19rem;
141 + top: 1rem;
142 + }
143 + .tui-image-editor-header-logo {
144 + display: none;
145 + }
67 `; 146 `;
68 147
69 export default GifEditor; 148 export default GifEditor;
......
...@@ -135,13 +135,6 @@ const Box = styled.div` ...@@ -135,13 +135,6 @@ const Box = styled.div`
135 background-color: white; 135 background-color: white;
136 box-shadow: ${({ theme }) => theme.boxShadow.normal}; 136 box-shadow: ${({ theme }) => theme.boxShadow.normal};
137 `; 137 `;
138 -const BlankBox = styled.div` 138 +
139 - z-index: 1;
140 - position: absolute;
141 - top: 0;
142 - width: 90%;
143 - height: 50px;
144 - background-color: white;
145 -`;
146 139
147 export default Image; 140 export default Image;
......
...@@ -3,6 +3,7 @@ import ImageEditor from "@toast-ui/react-image-editor"; ...@@ -3,6 +3,7 @@ import ImageEditor from "@toast-ui/react-image-editor";
3 import { useEffect, useState } from "react"; 3 import { useEffect, 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";
6 7
7 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { 8 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
8 // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>(); 9 // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
...@@ -75,6 +76,30 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -75,6 +76,30 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
75 } 76 }
76 }; 77 };
77 78
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 +
78 return ( 103 return (
79 <Container> 104 <Container>
80 <div onClick={handleEnd} className="upload"> 105 <div onClick={handleEnd} className="upload">
...@@ -87,11 +112,10 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -87,11 +112,10 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
87 name: "SampleImage", 112 name: "SampleImage",
88 }, 113 },
89 // theme: myTheme, 114 // theme: myTheme,
90 - menu: ["shape", "filter"],
91 initMenu: "filter", 115 initMenu: "filter",
92 uiSize: { 116 uiSize: {
93 width: "100%", 117 width: "100%",
94 - height: "700px", 118 + height: "600px",
95 }, 119 },
96 menuBarPosition: "bottom", 120 menuBarPosition: "bottom",
97 }} 121 }}
......
...@@ -59,6 +59,8 @@ ...@@ -59,6 +59,8 @@
59 imageEditor.ui.resizeEditor(); 59 imageEditor.ui.resizeEditor();
60 }; 60 };
61 61
62 + console.log('imageeiasdfasdf', imageEditor)
63 +
62 let gifGenerator; 64 let gifGenerator;
63 setTimeout(function () { 65 setTimeout(function () {
64 gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); 66 gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
......
...@@ -36,20 +36,7 @@ const Index = () => { ...@@ -36,20 +36,7 @@ const Index = () => {
36 </button> 36 </button>
37 </div> 37 </div>
38 ) : ( 38 ) : (
39 - !isEditorOpened && ( 39 + !isEditorOpened && <GifEditor {...{ previewURL }} />
40 - <>
41 - <div style={{ position: "fixed", top: "5rem" }}>
42 - <button
43 - className="open-button"
44 - onClick={() => setIsEditorOpened(true)}
45 - >
46 - Change Image
47 - </button>
48 - </div>
49 - <Image {...{ previewURL, setPreviewURL }} />
50 - <GifEditor {...{ previewURL }} />
51 - </>
52 - )
53 )} 40 )}
54 {isEditorOpened && ( 41 {isEditorOpened && (
55 <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} /> 42 <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} />
......