Showing
4 changed files
with
20 additions
and
43 deletions
... | @@ -3,9 +3,7 @@ import axios from "axios"; | ... | @@ -3,9 +3,7 @@ import axios from "axios"; |
3 | const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com"; | 3 | const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com"; |
4 | 4 | ||
5 | export const postGif = async (formData) => { | 5 | export const postGif = async (formData) => { |
6 | - console.log("file", formData); | ||
7 | const { data } = await axios.post(baseURL, formData); | 6 | const { data } = await axios.post(baseURL, formData); |
8 | - | ||
9 | return data; | 7 | return data; |
10 | }; | 8 | }; |
11 | 9 | ... | ... |
... | @@ -46,12 +46,6 @@ const GifEditor = ({ previewURL }) => { | ... | @@ -46,12 +46,6 @@ const GifEditor = ({ previewURL }) => { |
46 | } | 46 | } |
47 | }, []); | 47 | }, []); |
48 | 48 | ||
49 | - useEffect(() => { | ||
50 | - if (imageEditor) { | ||
51 | - console.log(imageEditor._graphics.getCanvas().getObjects()); | ||
52 | - } | ||
53 | - }, [imageEditor]); | ||
54 | - | ||
55 | const makeGif = () => { | 49 | const makeGif = () => { |
56 | setIsMakeStarted(true); | 50 | setIsMakeStarted(true); |
57 | const gifGenerator = new window.GifGenerator( | 51 | const gifGenerator = new window.GifGenerator( |
... | @@ -74,7 +68,7 @@ const GifEditor = ({ previewURL }) => { | ... | @@ -74,7 +68,7 @@ const GifEditor = ({ previewURL }) => { |
74 | const formData = new FormData(); | 68 | const formData = new FormData(); |
75 | formData.append("gif", file); | 69 | formData.append("gif", file); |
76 | const res = await postGif(formData); | 70 | const res = await postGif(formData); |
77 | - console.log(res); | 71 | + |
78 | setIsUploadLoading(false); | 72 | setIsUploadLoading(false); |
79 | setViewLink( | 73 | setViewLink( |
80 | `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif` | 74 | `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif` | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | - <head> | 3 | + |
4 | +<head> | ||
4 | <meta charset="UTF-8" /> | 5 | <meta charset="UTF-8" /> |
5 | <title>TUI Example</title> | 6 | <title>TUI Example</title> |
6 | - <link | 7 | + <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" /> |
7 | - type="text/css" | ||
8 | - href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" | ||
9 | - rel="stylesheet" | ||
10 | - /> | ||
11 | <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" /> | 8 | <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" /> |
12 | <style> | 9 | <style> |
13 | @import url(http://fonts.googleapis.com/css?family=Noto+Sans); | 10 | @import url(http://fonts.googleapis.com/css?family=Noto+Sans); |
11 | + | ||
14 | html, | 12 | html, |
15 | body { | 13 | body { |
16 | height: 100%; | 14 | height: 100%; |
17 | margin: 0; | 15 | margin: 0; |
18 | } | 16 | } |
19 | </style> | 17 | </style> |
20 | - </head> | 18 | +</head> |
21 | - <body> | 19 | + |
20 | +<body> | ||
22 | <div id="tui-image-editor-container"></div> | 21 | <div id="tui-image-editor-container"></div> |
23 | - <script | 22 | + <script type="text/javascript" |
24 | - type="text/javascript" | 23 | + src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script> |
25 | - src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js" | 24 | + <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script> |
26 | - ></script> | 25 | + <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script> |
27 | - <script | 26 | + <script type="text/javascript" |
28 | - type="text/javascript" | 27 | + src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> |
29 | - src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js" | ||
30 | - ></script> | ||
31 | - <script | ||
32 | - type="text/javascript" | ||
33 | - src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js" | ||
34 | - ></script> | ||
35 | - <script | ||
36 | - type="text/javascript" | ||
37 | - src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js" | ||
38 | - ></script> | ||
39 | <script type="text/javascript" src="./tui-image-editor.js"></script> | 28 | <script type="text/javascript" src="./tui-image-editor.js"></script> |
40 | <script type="text/javascript" src="./black-theme.js"></script> | 29 | <script type="text/javascript" src="./black-theme.js"></script> |
41 | <script type="text/javascript" src="../../dist/gif-generator.js"></script> | 30 | <script type="text/javascript" src="../../dist/gif-generator.js"></script> |
... | @@ -59,8 +48,6 @@ | ... | @@ -59,8 +48,6 @@ |
59 | imageEditor.ui.resizeEditor(); | 48 | imageEditor.ui.resizeEditor(); |
60 | }; | 49 | }; |
61 | 50 | ||
62 | - console.log("imageeiasdfasdf", imageEditor); | ||
63 | - | ||
64 | let gifGenerator; | 51 | let gifGenerator; |
65 | setTimeout(function () { | 52 | setTimeout(function () { |
66 | gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); | 53 | gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); |
... | @@ -77,8 +64,7 @@ | ... | @@ -77,8 +64,7 @@ |
77 | ); | 64 | ); |
78 | } | 65 | } |
79 | </script> | 66 | </script> |
80 | - <button | 67 | + <button style=" |
81 | - style=" | ||
82 | position: absolute; | 68 | position: absolute; |
83 | top: 70px; | 69 | top: 70px; |
84 | right: 70px; | 70 | right: 70px; |
... | @@ -86,10 +72,9 @@ | ... | @@ -86,10 +72,9 @@ |
86 | background: rgba(0, 0, 0, 0); | 72 | background: rgba(0, 0, 0, 0); |
87 | color: #fff; | 73 | color: #fff; |
88 | padding: 10px 20px; | 74 | padding: 10px 20px; |
89 | - " | 75 | + " onClick="render();"> |
90 | - onClick="render();" | ||
91 | - > | ||
92 | GIF 생성 | 76 | GIF 생성 |
93 | </button> | 77 | </button> |
94 | - </body> | 78 | +</body> |
79 | + | ||
95 | </html> | 80 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -52,10 +52,10 @@ export class GifGenerator { | ... | @@ -52,10 +52,10 @@ export class GifGenerator { |
52 | const objs = []; | 52 | const objs = []; |
53 | 53 | ||
54 | fabricObjs.map((fabricObj) => { | 54 | fabricObjs.map((fabricObj) => { |
55 | - if (fabricObj.path !== undefined) { | 55 | + if (fabricObj.path !== null) { |
56 | objs.push(new Component.Brush(fabricObj)); | 56 | objs.push(new Component.Brush(fabricObj)); |
57 | this.canvas.remove(fabricObj); | 57 | this.canvas.remove(fabricObj); |
58 | - } else if (fabricObj.text !== undefined) { | 58 | + } else if (fabricObj.text !== null) { |
59 | objs.push(new Component.Text(fabricObj)); | 59 | objs.push(new Component.Text(fabricObj)); |
60 | this.canvas.remove(fabricObj); | 60 | this.canvas.remove(fabricObj); |
61 | } | 61 | } | ... | ... |
-
Please register or login to post a comment