똑같은 이미지 나오는 이유 알고싶습니다

smiles code 를 가지고 canvas 에 분자 그림을 그리고 그려진 분자 그림을 엑셀 행 안에 이미지로 나타내고 싶은데 현재 다른 smiles code 인데 불구하고 똑같은 이미지가 출력되는 상황입니다. Map 을 돌면서 해당 smiles code 에 대한 이미지 출력하는 방법을 알고싶습니다

1import React, { useState, useRef, useEffect } from "react";
2import classNames from "classnames/bind";
3import styles from "@/components/button/downloadButton/DownloadButton.module.css";
4import SmilesDrawer from "smiles-drawer";
5import { useInferenceStore } from "@/components/contexts/InferenceStore";
6
7import * as ExcelJS from "exceljs";
8import { toCanvas, toPng } from "html-to-image";
9import * as XLSX from "xlsx";
10import * as FileSaver from "file-saver";
11import { IInference } from "@/types/InferenceTypes";
12import html2canvas from "html2canvas";
13const cx = classNames.bind(styles);
14
15/**
16 * Report Download 버튼
17 * @author hblee
18 */
19
20const DownloadButton = () => {
21  const { cardInfo } = useInferenceStore();
22  const [isDownloaded, setDownloaded] = useState<boolean>(false);
23  const canvasRef = useRef<HTMLCanvasElement>(null);
24  const [layer, setLayer] = useState<any[]>([]);
25
26  const onCapture = () => {
27    html2canvas(document.getElementById("canvas")!).then((canvas) => {
28      onSaveAs(canvas.toDataURL("image/png"), "test.png");
29    });
30  };
31
32  const onSaveAs = (uri: string, filename: string) => {
33    setLayer([...layer, uri]);
34  };
35
36  //dataurl 구하기
37  const repeatDraw = async (smiles: string) => {
38    console.log("smiles : ", smiles);
39    // const canvas = canvasRef.current;
40    let drawer = new SmilesDrawer.Drawer({
41      width: 120,
42      height: 120,
43      compactDrawing: false,
44    });
45
46    SmilesDrawer.parse(smiles, function (tree: any) {
47      drawer.draw(tree, canvasRef.current, "light", false);
48    });
49
50    console.log(drawer);
51    // onCapture();
52  };
53
54  const workbook = new ExcelJS.Workbook();
55  //sheet 이름 test
56  const worksheet = workbook.addWorksheet("test");
57  const excelDownload = async (data: IInference | undefined) => {
58    // sheet 데이터 설정
59    //worksheet.getCell("A1").value = "target smiles";
60    //worksheet.getCell("A2").value = `${cardInfo?.target_smiles}`;
61    // /[`#`, `initial_mol`, `\t`, `reactant1`, `reaction`, `product1`],
62    data?.inference.splice(2, 1).map((data, idx) => {
63      console.log("data : ", data);
64      repeatDraw(String(data.rxn.layer1.A));
65    });
66
67    workbook.xlsx.writeBuffer().then(function (data) {
68      var blob = new Blob([data], {
69        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
70      });
71      FileSaver.saveAs(blob, "testExcel.xlsx");
72    });
73  };
74
75  const onClickHandler = () => {
76    excelDownload(cardInfo);
77  };
78  // cardInfo에서 target_smiles, A,I,T 필요!
79  // cardInfo에서 얻은 A,I 값으로 분자 그리기
80  useEffect(() => {
81    if (isDownloaded) {
82      onClickHandler();
83    }
84  }, [isDownloaded]);
85
86  return (
87    <>
88      {isDownloaded && (
89        <canvas id="canvas" ref={canvasRef} width={"100%"} height={"100%"} />
90      )}
91      <div className={cx("fixed-btns")}>
92        <button
93          className={cx(isDownloaded && "loading")}
94          onClick={() => setDownloaded(true)}
95          disabled={isDownloaded}
96        >
97          Report Download
98        </button>
99      </div>
100    </>
101  );
102};
103
104export default DownloadButton;

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문