2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
7f24bae4 1 parent fdb55852

console.log 삭제

Inline Side-by-side
Showing 4 changed files with 72 additions and 95 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>
4 - <meta charset="UTF-8" />
5 - <title>TUI Example</title>
6 - <link
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" />
12 - <style>
13 - @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
14 - html,
15 - body {
16 - height: 100%;
17 - margin: 0;
18 - }
19 - </style>
20 - </head>
21 - <body>
22 - <div id="tui-image-editor-container"></div>
23 - <script
24 - type="text/javascript"
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"
26 - ></script>
27 - <script
28 - type="text/javascript"
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>
40 - <script type="text/javascript" src="./black-theme.js"></script>
41 - <script type="text/javascript" src="../../dist/gif-generator.js"></script>
42 - <script>
43 - // Image editor
44 - var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
45 - includeUI: {
46 - loadImage: {
47 - path: "./sampleImage2.png",
48 - name: "SampleImage",
49 - },
50 - theme: blackTheme, // or whiteTheme
51 - initMenu: "filter",
52 - menuBarPosition: "bottom",
53 - },
54 - cssMaxWidth: 700,
55 - cssMaxHeight: 500,
56 - usageStatistics: false,
57 - });
58 - window.onresize = function () {
59 - imageEditor.ui.resizeEditor();
60 - };
61 3
62 - console.log("imageeiasdfasdf", imageEditor); 4 +<head>
5 + <meta charset="UTF-8" />
6 + <title>TUI Example</title>
7 + <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
8 + <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
9 + <style>
10 + @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
11 +
12 + html,
13 + body {
14 + height: 100%;
15 + margin: 0;
16 + }
17 + </style>
18 +</head>
19 +
20 +<body>
21 + <div id="tui-image-editor-container"></div>
22 + <script 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>
24 + <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
25 + <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
26 + <script type="text/javascript"
27 + src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
28 + <script type="text/javascript" src="./tui-image-editor.js"></script>
29 + <script type="text/javascript" src="./black-theme.js"></script>
30 + <script type="text/javascript" src="../../dist/gif-generator.js"></script>
31 + <script>
32 + // Image editor
33 + var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
34 + includeUI: {
35 + loadImage: {
36 + path: "./sampleImage2.png",
37 + name: "SampleImage",
38 + },
39 + theme: blackTheme, // or whiteTheme
40 + initMenu: "filter",
41 + menuBarPosition: "bottom",
42 + },
43 + cssMaxWidth: 700,
44 + cssMaxHeight: 500,
45 + usageStatistics: false,
46 + });
47 + window.onresize = function () {
48 + imageEditor.ui.resizeEditor();
49 + };
63 50
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());
67 - gifGenerator.on("progress", (p) => console.log(p)); 54 + gifGenerator.on("progress", (p) => console.log(p));
68 - }, 1000); 55 + }, 1000);
69 - function render() { 56 + function render() {
70 - gifGenerator.make().then( 57 + gifGenerator.make().then(
71 - (blob) => { 58 + (blob) => {
72 - window.open(window.URL.createObjectURL(blob)); 59 + window.open(window.URL.createObjectURL(blob));
73 - }, 60 + },
74 - (error) => { 61 + (error) => {
75 - alert(error); 62 + alert(error);
76 - } 63 + }
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();" 76 + GIF 생성
91 - > 77 + </button>
92 - GIF 생성 78 +</body>
93 - </button> 79 +
94 - </body> 80 +</html>
95 -</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 }
......