2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
9c4fa0ed 2 parents 2abcaa7d cea27eb0

Merge branch 'develop' of http://khuhub.khu.ac.kr/2021-1-capstone-design1/MAC_Project1 into develop

Inline Side-by-side
Showing 9 changed files with 181 additions and 307 deletions
......@@ -9,6 +9,7 @@
"@testing-library/user-event": "^12.1.10",
"@toast-ui/react-image-editor": "3.14.2",
"@types/fabric": "^4.2.5",
"axios": "^0.21.1",
"fabric": "^4.4.0",
"next": "^10.0.5",
"react": "^17.0.2",
......
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;
};
export const getGif = async (id) => {
const { data } = await axios.get(baseURL, {
params: {
id: id,
},
});
return data;
};
import { useEffect, useRef, useState } from "react";
import { fabric } from "fabric";
import styled from "styled-components";
import { GifGenerator } from "gif-generator/src";
import ImageEditor from "@toast-ui/react-image-editor";
import TuiImageEditor from "tui-image-editor";
import "gif-generator/dist/gif-generator";
import { postGif } from "api";
declare global {
interface Window {
GifGenerator: any;
}
}
const GifEditor = ({ previewURL }) => {
const [canvas, setCanvas] = useState<HTMLCanvasElement>();
const [gifGenerator, setGifGenerator] = useState(null);
const [imageEditor, setImageEditor] = useState(null);
const rootEl = useRef();
const [download, setDownload] = useState(null);
const [blob, setBlob] = useState(null);
const [isMakeStarted, setIsMakeStarted] = useState(false);
const [isUploadLoading, setIsUploadLoading] = useState(false);
const [viewLink, setViewLink] = useState(null);
useEffect(() => {
if (window) {
setCanvas(
document.getElementsByClassName(
"tui-image-editor-container"
)[0] as HTMLCanvasElement
setImageEditor(
new TuiImageEditor(rootEl.current, {
includeUI: {
loadImage: {
path: previewURL,
name: "SampleImage",
},
uiSize: {
width: "100%",
height: "600px",
},
menu: ["draw", "text"],
menuBarPosition: "bottom",
},
cssMaxWidth: 500,
cssMaxHeight: 700,
usageStatistics: false,
})
);
}
}, []);
console.log(
"asdf",
document.getElementsByClassName("tui-image-editor-container")
);
console.log("canvas", canvas);
console.log('useref',useRef.arguments)
useEffect(()=>{
if(canvas)setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
}, [canvas])
// useEffect(() => {
// // const img = lowerCanvas?.toDataURL("image/png");
// // const uploaded = document.getElementById("image");
// // console.log(uploaded);
// // let w = window.open();
// // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
// const image = new Image();
// // image.onload = function () {
// // lowerCanvas.width = uploaded.clientWidth;
// // lowerCanvas.height = uploaded.clientHeight;
// // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
// // };
// image.src = previewURL;
// console.log("canvascontext", canvas?.getContext);
// if (canvas?.getContext) {
// console.log('왜안돼')
// image.onload = function () {
// canvas.width = 1000;
// canvas.height = 572;
// canvas?.getContext("2d").drawImage(image, 0, 0);
// };
// // console.log(canvas.getContext("2d"));
// }
// }, [canvas]);
useEffect(() => {
if (imageEditor) {
console.log(imageEditor._graphics.getCanvas().getObjects());
}
}, [imageEditor]);
const render = () => {
const makeGif = () => {
setIsMakeStarted(true);
const gifGenerator = new window.GifGenerator(
imageEditor._graphics.getCanvas()
);
gifGenerator.make().then(
(blob) => {
window.open(window.URL.createObjectURL(blob));
setBlob(blob);
setDownload(window.URL.createObjectURL(blob));
},
(error) => {
alert(error);
......@@ -64,44 +68,58 @@ const GifEditor = ({ previewURL }) => {
);
};
const handleUpload = async () => {
setIsUploadLoading(true);
const file = new File([blob], "new_gif.gif");
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`
);
};
return (
<Container>
<div onClick={render} className="upload">
Save
</div>
<ImageEditor
includeUI={{
loadImage: {
path: previewURL,
name: "SampleImage",
},
menu: ["draw", "text"],
initMenu: "draw",
uiSize: {
width: "100%",
height: "600px",
},
menuBarPosition: "bottom",
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={true}
/>
<div className="alert">Please select a photo.</div>
</Container>
// <Container>
// <ImgBox>
// <canvas id="gif-canvas" />
// </ImgBox>
// </Container>
<>
<Wrapper>
{((isMakeStarted && !download) || isUploadLoading) && (
<>
<div className="background" />
<div className="download">loading...</div>
</>
)}
{!isUploadLoading && viewLink && (
<div className="download" style={{ zIndex: 200 }}>
<a href={viewLink}>{viewLink}</a>
</div>
)}
{download && !isUploadLoading && (
<>
<div className="background" />
<div className="download">
<div className="download__btn">
<a href={download} download="new_gif.gif">
Download a File
</a>
</div>
<div className="download__btn">
<div onClick={handleUpload}>Upload to Server</div>
</div>
</div>
</>
)}
<div onClick={makeGif} className="make">
Make a Gif
</div>
<div ref={rootEl} />
</Wrapper>
</>
);
};
const Container = styled.div`
const Wrapper = styled.div`
position: fixed;
width: 90%;
top: 10rem;
......@@ -110,7 +128,11 @@ const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
.upload {
a {
color: black;
text-decoration: none;
}
.make {
font: 800 11.5px Arial;
position: absolute;
right: 0;
......@@ -127,11 +149,30 @@ const Container = styled.div`
justify-content: center;
cursor: pointer;
}
.alert {
.background {
position: fixed;
border-radius: 0.5rem;
transition: 1s;
top: 7rem;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: black;
opacity: 0.7;
z-index: 100;
}
.download {
position: absolute;
top: 15rem;
z-index: 100;
display: flex;
background-color: white;
padding: 1.5rem 2rem;
border-radius: 2rem;
&__btn {
cursor: pointer;
:last-child {
margin-left: 1rem;
}
}
}
.tui-image-editor-container {
border-radius: 1.5rem;
......@@ -143,6 +184,9 @@ const Container = styled.div`
.tui-image-editor-header-logo {
display: none;
}
.tui-image-editor-header-buttons {
display: none;
}
`;
export default GifEditor;
......
import dynamic from "next/dynamic";
import { useState } from "react";
import styled from "styled-components";
const ToastEditor = dynamic(() => import("components/ToastEditor"), {
ssr: false,
});
const Image = ({ previewURL, setPreviewURL }) => {
const [file, setFile] = useState(undefined);
// console.log("previewURL", previewURL);
// const uploadImage = (file) => {
// if (!file) {
// return;
// }
// };
// const selectImg = (e) => {
// const reader = new FileReader();
// const targetFile = e.target.files[0];
// setFile(targetFile);
// // uploadImage(targetFile);
// reader.onloadend = () => {
// setPreviewURL(reader.result);
// };
// reader.readAsDataURL(targetFile);
// };
// const [isEditorOpened, setIsEditorOpened] = useState(false);
// const handleEditor = () => {
// setIsEditorOpened(true);
// };
return (
<>
<Container>
<ImgBox>
{/* <div onClick={handleEditor}>asdf</div> */}
{/* {file === undefined ? ( */}
<>
{/* <div className="sub-flex">
<BlankBox />
<div>Click to add a photo</div>
<input
type="file"
style={{
position: "absolute",
top: 0,
paddingLeft: 0,
zIndex: 0,
width: "90%",
height: "100%",
border: "none",
cursor: "pointer",
outline: "none",
}}
onChange={selectImg}
/>
</div>
<div className="sub-flex">Open Image Editor</div> */}
</>
{/* ) : ( */}
<img
id="image"
alt={""}
style={{
objectFit: "cover",
display: "flex",
maxHeight: "90%",
maxWidth: "90%",
}}
src={previewURL as string}
/>
{/* )} */}
</ImgBox>
{/* <Menu /> */}
</Container>
{/* {isEditorOpened && <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />} */}
</>
);
};
const Menu = () => {
return (
<div style={{ width: "15rem", marginLeft: "2rem" }}>
<Box />
<Box />
<Box />
<Box />
</div>
);
};
const Container = styled.div`
width: 100%;
display: flex;
justify-content: center;
margin-top: 10rem;
`;
const ImgBox = styled.div`
position: relative;
width: 90%;
/* height: 30rem; */
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;
/* flex: 0.6; */
padding: 1rem 0;
/* .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};
}
} */
`;
const Box = styled.div`
width: 100%;
height: 10rem;
margin-top: 2rem;
border-radius: 1rem;
background-color: white;
box-shadow: ${({ theme }) => theme.boxShadow.normal};
`;
export default Image;
/// <reference path="react-image-editor.d.ts" />
import ImageEditor from "@toast-ui/react-image-editor";
import { useEffect, useState } from "react";
import { useState } from "react";
import styled from "styled-components";
import "tui-image-editor/dist/tui-image-editor.css";
import { GifGenerator } from "gif-generator/src/index";
const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
// const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
// const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
// // console.log(
// // document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
// // );
// console.log("s");
// // const [upperCanvas, setUpperCanvas] = useState(
// // document.getElementsByClassName("upper-canvas ")[0]
// // );
// useEffect(() => {
// window?.addEventListener("click", () => {
// setLowerCanvas(
// document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
// );
// setUpperCanvas(
// document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
// );
// });
// }, []);
// useEffect(() => {
// const img = lowerCanvas?.toDataURL("image/png");
// const uploaded = document.getElementById("image");
// console.log(uploaded);
// // let w = window.open();
// // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
// const image = new Image();
// // image.onload = function () {
// // lowerCanvas.width = uploaded.clientWidth;
// // lowerCanvas.height = uploaded.clientHeight;
// // lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
// // };
// image.src = previewURL;
// console.log("b");
// if (lowerCanvas?.getContext&&upperCanvas?.getContext) {
// image.onload = function () {
// lowerCanvas.width = 1000;
// lowerCanvas.height = 572;
// upperCanvas.width = 1000;
// upperCanvas.height = 572;
// lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
// };
// console.log(lowerCanvas.getContext("2d"));
// }
// }, [lowerCanvas?.toDataURL("image/png")]);
const [alertIsShown, setAlertIsShown] = useState(false);
const handleEnd = () => {
......@@ -76,43 +26,16 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
}
};
// console.log('asdf',document
// .getElementsByClassName("tui-image-editor-container"))
// window.GifGenerator = GifGenerator;
// let gifGenerator;
// setTimeout(function () {
// gifGenerator = new GifGenerator(
// document
// .getElementsByClassName("tui-image-editor-container")
// ._graphics.getCanvas()
// );
// }, 1000);
// function render() {
// gifGenerator.make().then(
// (blob) => {
// window.open(window.URL.createObjectURL(blob));
// },
// (error) => {
// alert(error);
// }
// );
// }
return (
<Container>
<div onClick={handleEnd} className="upload">
Upload
<div onClick={handleEnd} className="move">
Move to Gif
</div>
<ImageEditor
includeUI={{
loadImage: {
// path: 'img/sampleImage.jpg',
name: "SampleImage",
},
// theme: myTheme,
initMenu: "filter",
uiSize: {
width: "100%",
height: "600px",
......@@ -143,7 +66,7 @@ const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
.upload {
.move {
font: 800 11.5px Arial;
position: absolute;
right: 0;
......
......@@ -52,7 +52,7 @@ export class GifGenerator {
const objs = [];
fabricObjs.map((fabricObj) => {
if (fabricObj instanceof fabric.Path) {
if (fabricObj.path !== undefined) {
objs.push(new Component.Brush(fabricObj));
this.canvas.remove(fabricObj);
} else if (fabricObj.text !== undefined) {
......
import { useRouter } from "next/dist/client/router";
const Detail = () => {
const id = useRouter().query.id;
return (
<div>
<img
src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
/>
</div>
);
};
export default Detail;
import Header from "components/Header";
import Image from "components/Image";
import styled from "styled-components";
import dynamic from "next/dynamic";
import { useState } from "react";
......
......@@ -1856,6 +1856,13 @@ axe-core@^4.0.2:
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
axios@^0.21.1:
version "0.21.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
dependencies:
follow-redirects "^1.10.0"
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
......@@ -3184,6 +3191,11 @@ flatted@^3.1.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
follow-redirects@^1.10.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
foreach@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
......