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";
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;
};
......
......@@ -46,12 +46,6 @@ const GifEditor = ({ previewURL }) => {
}
}, []);
useEffect(() => {
if (imageEditor) {
console.log(imageEditor._graphics.getCanvas().getObjects());
}
}, [imageEditor]);
const makeGif = () => {
setIsMakeStarted(true);
const gifGenerator = new window.GifGenerator(
......@@ -74,7 +68,7 @@ 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`
......
<!DOCTYPE html>
<html>
<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="./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>
<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="./tui-image-editor.js"></script>
<script type="text/javascript" src="./black-theme.js"></script>
<script type="text/javascript" src="../../dist/gif-generator.js"></script>
<script>
// Image editor
var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
includeUI: {
loadImage: {
path: "./sampleImage2.png",
name: "SampleImage",
},
theme: blackTheme, // or whiteTheme
initMenu: "filter",
menuBarPosition: "bottom",
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false,
});
window.onresize = function () {
imageEditor.ui.resizeEditor();
};
console.log("imageeiasdfasdf", imageEditor);
<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="./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>
<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="./tui-image-editor.js"></script>
<script type="text/javascript" src="./black-theme.js"></script>
<script type="text/javascript" src="../../dist/gif-generator.js"></script>
<script>
// Image editor
var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
includeUI: {
loadImage: {
path: "./sampleImage2.png",
name: "SampleImage",
},
theme: blackTheme, // or whiteTheme
initMenu: "filter",
menuBarPosition: "bottom",
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false,
});
window.onresize = function () {
imageEditor.ui.resizeEditor();
};
let gifGenerator;
setTimeout(function () {
gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
gifGenerator.on("progress", (p) => console.log(p));
}, 1000);
function render() {
gifGenerator.make().then(
(blob) => {
window.open(window.URL.createObjectURL(blob));
},
(error) => {
alert(error);
}
);
}
</script>
<button
style="
let gifGenerator;
setTimeout(function () {
gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
gifGenerator.on("progress", (p) => console.log(p));
}, 1000);
function render() {
gifGenerator.make().then(
(blob) => {
window.open(window.URL.createObjectURL(blob));
},
(error) => {
alert(error);
}
);
}
</script>
<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();"
>
GIF 생성
</button>
</body>
</html>
" onClick="render();">
GIF 생성
</button>
</body>
</html>
\ No newline at end of file
......
......@@ -52,10 +52,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);
}
......