index.tsx
2.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/// <reference path="react-image-editor.d.ts" />
import ImageEditor from "@toast-ui/react-image-editor";
import { useEffect, useState } from "react";
import "tui-image-editor/dist/tui-image-editor.css";
const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
// 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 handleEnd = () => {
const lowerCanvas = document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement;
setPreviewURL(lowerCanvas.toDataURL("image/png"));
console.log('asdf')
setIsImgAdded(true);
};
return (
<>
<div onClick={handleEnd}>asdf</div>
<ImageEditor
includeUI={{
loadImage: {
// path: 'img/sampleImage.jpg',
name: "SampleImage",
},
// theme: myTheme,
menu: ["shape", "filter"],
initMenu: "filter",
uiSize: {
width: "1000px",
height: "700px",
},
menuBarPosition: "bottom",
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={true}
/>
</>
);
};
export default ToastEditor;