2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
a22b69f6 1 parent 6e965fe1

코드 정리

Inline Side-by-side
Showing 5 changed files with 11 additions and 324 deletions
......@@ -2,11 +2,15 @@ import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import TuiImageEditor from "tui-image-editor";
import "gif-generator/dist/gif-generator";
import { getGif, postGif } from "api";
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();
......@@ -15,19 +19,6 @@ const GifEditor = ({ previewURL }) => {
const [blob, setBlob] = useState(null);
useEffect(() => {
// if (window) {
// setCanvas(
// document.getElementsByClassName(
// "tui-image-editor-container"
// )[0] as HTMLCanvasElement
// );
// console.log(
// document.getElementsByClassName(
// "tui-image-editor-container"
// )[0] as HTMLCanvasElement
// );
// }
if (window) {
setImageEditor(
new TuiImageEditor(rootEl.current, {
......@@ -53,14 +44,15 @@ const GifEditor = ({ previewURL }) => {
useEffect(() => {
if (imageEditor) {
// setGifGenerator(new GifGenerator(imageEditor._graphics.getCanvas()));
console.log(imageEditor._graphics.getCanvas().getObjects());
}
}, [imageEditor]);
const render = () => {
console.log("aaa", imageEditor._graphics.getCanvas().getObjects());
const gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
const gifGenerator = new window.GifGenerator(
imageEditor._graphics.getCanvas()
);
gifGenerator.make().then(
(blob) => {
setBlob(blob);
......@@ -73,45 +65,7 @@ const GifEditor = ({ previewURL }) => {
}
);
};
//localhost:3000/f431b497-4ece-46d4-8708-8b1703d21b6e
// useEffect(() => {
// // if (canvas) setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
// if (canvas) {
// console.log("aaaaa", canvas);
// }
// }, [canvas]);
// useEffect(() => {
// if (window) {
// setCanvas(document.getElementById("gif-canvas") 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("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]);
const handleUpload = async () => {
const file = new File([blob], "file.gif");
const formData = new FormData();
......@@ -134,36 +88,9 @@ const GifEditor = ({ previewURL }) => {
<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 ref={rootEl} />
<div className="alert">Please select a photo.</div>
</Wrapper>
{/* <Container>
<ImgBox>
<canvas id="gif-canvas" />
</ImgBox>
</Container> */}
</>
);
};
......@@ -212,25 +139,4 @@ const Wrapper = styled.div`
}
`;
const Container = styled.div`
width: 100%;
display: flex;
justify-content: center;
margin-top: 10rem;
`;
const ImgBox = styled.div`
position: relative;
width: 90%;
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: 1rem 0;
`;
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,30 +26,6 @@ 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">
......@@ -108,10 +34,8 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
<ImageEditor
includeUI={{
loadImage: {
// path: 'img/sampleImage.jpg',
name: "SampleImage",
},
// theme: myTheme,
initMenu: "filter",
uiSize: {
width: "100%",
......
import { getGif } from "api";
import { useRouter } from "next/dist/client/router";
import { useEffect, useState } from "react";
const Detail = () => {
const id = useRouter().query.id;
......
import Header from "components/Header";
import Image from "components/Image";
import styled from "styled-components";
import dynamic from "next/dynamic";
import { useState } from "react";
......