2021-1-capstone-design1 / MAC_Project1

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

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

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