2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
0ec5ba95 2 parents 03dde13c 07e8e402

Merge branch 'develop'

Inline Side-by-side
Showing 6 changed files with 123 additions and 56 deletions
......@@ -3,9 +3,7 @@ import axios from "axios";
const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com";
export const postGif = async (formData) => {
console.log("file", formData);
const { data } = await axios.post(baseURL, formData);
return data;
};
......
......@@ -17,6 +17,7 @@ const GifEditor = ({ previewURL }) => {
const [download, setDownload] = useState(null);
const [blob, setBlob] = useState(null);
const [percent, setPercent] = useState(0);
const [isMakeStarted, setIsMakeStarted] = useState(false);
const [isUploadLoading, setIsUploadLoading] = useState(false);
......@@ -46,19 +47,16 @@ const GifEditor = ({ previewURL }) => {
}
}, []);
useEffect(() => {
if (imageEditor) {
console.log(imageEditor._graphics.getCanvas().getObjects());
}
}, [imageEditor]);
const makeGif = () => {
setIsMakeStarted(true);
const gifGenerator = new window.GifGenerator(
imageEditor._graphics.getCanvas()
);
gifGenerator.on("progress", (p: number) => {
setPercent(Math.round(p * 100));
});
gifGenerator.make().then(
(blob) => {
(blob: Blob) => {
setBlob(blob);
setDownload(window.URL.createObjectURL(blob));
},
......@@ -74,11 +72,9 @@ const GifEditor = ({ previewURL }) => {
const formData = new FormData();
formData.append("gif", file);
const res = await postGif(formData);
console.log(res);
setIsUploadLoading(false);
setViewLink(
`https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif`
);
setViewLink(`https://gif-generator.bu.to/${res.id}`);
};
return (
......@@ -87,7 +83,9 @@ const GifEditor = ({ previewURL }) => {
{((isMakeStarted && !download) || isUploadLoading) && (
<>
<div className="background" />
<div className="download">loading...</div>
<div className="download">
loading... {!isUploadLoading && percent}%
</div>
</>
)}
{!isUploadLoading && viewLink && (
......@@ -135,7 +133,7 @@ const Wrapper = styled.div`
.make {
font: 800 11.5px Arial;
position: absolute;
right: 0;
left: 0;
top: 0;
width: 120px;
height: 40px;
......@@ -148,6 +146,9 @@ const Wrapper = styled.div`
align-items: center;
justify-content: center;
cursor: pointer;
:hover {
text-decoration: underline;
}
}
.background {
position: fixed;
......@@ -172,6 +173,9 @@ const Wrapper = styled.div`
:last-child {
margin-left: 1rem;
}
:hover {
text-decoration: underline;
}
}
}
.tui-image-editor-container {
......@@ -187,6 +191,9 @@ const Wrapper = styled.div`
.tui-image-editor-header-buttons {
display: none;
}
.tui-image-editor-help-menu {
display: none;
}
`;
export default GifEditor;
......
......@@ -2,6 +2,7 @@
import ImageEditor from "@toast-ui/react-image-editor";
import { useState } from "react";
import styled from "styled-components";
import { media } from "styles/theme";
import "tui-image-editor/dist/tui-image-editor.css";
const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
......@@ -69,11 +70,10 @@ const Container = styled.div`
.move {
font: 800 11.5px Arial;
position: absolute;
right: 0;
top: 0;
left: 7.8rem;
width: 120px;
height: 40px;
background: red;
z-index: 10;
border-radius: 20px;
margin: 8px;
......@@ -82,6 +82,12 @@ const Container = styled.div`
align-items: center;
justify-content: center;
cursor: pointer;
:hover {
text-decoration: underline;
}
${media.tablet} {
left: 12.3rem;
}
}
.alert {
position: fixed;
......@@ -99,6 +105,12 @@ const Container = styled.div`
.tui-image-editor-header-logo {
display: none;
}
.tui-image-editor-help-menu {
display: none;
}
.tui-image-editor-header-buttons {
position: absolute;
}
`;
export default ToastEditor;
......
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8" />
<title>TUI Example</title>
<link
type="text/css"
href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
rel="stylesheet"
/>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
<link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script
type="text/javascript"
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>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
></script>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
></script>
<script type="text/javascript"
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>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="./tui-image-editor.js"></script>
<script type="text/javascript" src="./black-theme.js"></script>
<script type="text/javascript" src="../../dist/gif-generator.js"></script>
......@@ -59,8 +48,6 @@
imageEditor.ui.resizeEditor();
};
console.log("imageeiasdfasdf", imageEditor);
let gifGenerator;
setTimeout(function () {
gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
......@@ -77,8 +64,7 @@
);
}
</script>
<button
style="
<button style="
position: absolute;
top: 70px;
right: 70px;
......@@ -86,10 +72,9 @@
background: rgba(0, 0, 0, 0);
color: #fff;
padding: 10px 20px;
"
onClick="render();"
>
" onClick="render();">
GIF 생성
</button>
</body>
</body>
</html>
\ No newline at end of file
......
import GIF from "@dhdbstjr98/gif.js";
import { fabric } from "fabric";
import Component from "./components";
export class GifGenerator {
......@@ -18,7 +17,8 @@ export class GifGenerator {
height: this.height,
transparent: null,
repeat: 0,
setQuality: 10,
workers: 8,
setQuality: 20,
});
Object.keys(this.events).map((event) => {
......@@ -51,10 +51,10 @@ export class GifGenerator {
const objs = [];
fabricObjs.map((fabricObj) => {
if (fabricObj.path !== undefined) {
if (fabricObj.path !== null) {
objs.push(new Component.Brush(fabricObj));
this.canvas.remove(fabricObj);
} else if (fabricObj.text !== undefined) {
} else if (fabricObj.text !== null) {
objs.push(new Component.Text(fabricObj));
this.canvas.remove(fabricObj);
}
......
import Header from "components/Header";
import { useRouter } from "next/dist/client/router";
import styled from "styled-components";
const Detail = () => {
const id = useRouter().query.id;
return (
<div>
<Container>
<Header />
<ImgBox>
<img
className="img"
src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
/>
</div>
</ImgBox>
</Container>
);
};
const Container = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
`;
const ImgBox = styled.div`
position: relative;
max-width: 60%;
max-height: 60%;
background-color: white;
box-shadow: ${({ theme }) => theme.boxShadow.normal};
border-radius: 2rem;
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
display: flex;
padding: 3rem;
/* flex: 0.6; */
/* .sub-flex {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
:first-child {
border-right: 1px solid ${({ theme }) => theme.color.gray};
}
} */
.img {
max-width: 100%;
max-height: 100%;
}
`;
const Wrapper = styled.div`
width: 100%;
height: 100vh;
.box {
width: 90%;
border-radius: 1.5rem;
box-shadow: ${({ theme }) => theme.boxShadow.normal};
display: flex;
flex-direction: column;
align-items: center;
}
.img {
max-width: 90%;
max-height: 90%;
}
`;
export default Detail;
......