- fs install

- 이미지 저장 수정

next.config.mjs

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
   webpack: (config) => {
+    config.resolve.fallback = { fs: false }
     config.externals.push({
       'utf-8-validate': 'commonjs utf-8-validate',
       bufferutil: 'commonjs bufferutil',

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.3",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
+    "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",

src/hooks/useCanvas.js

@@ -1,6 +1,13 @@
 import { useEffect, useRef, useState } from 'react'
 import { fabric } from 'fabric'
-import { actionHandler, anchorWrapper, calculateIntersection, distanceBetweenPoints, polygonPositionHandler } from '@/util/canvas-util'
+import {
+  actionHandler,
+  anchorWrapper,
+  calculateIntersection,
+  distanceBetweenPoints,
+  polygonPositionHandler,
+  test,
+} from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
@@ -8,8 +15,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
 import { defineQPloygon } from '@/util/qpolygon-utils'
-
+import { writeImage } from '@/lib/canvas'
-import * as turf from '@turf/turf'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -502,16 +508,12 @@ export function useCanvas(id) {
    * 이미지로 저장하는 함수
    * @param {string} title - 저장할 이미지 이름
    */
-  const saveImage = (title = 'canvas') => {
+  const saveImage = async (title = 'canvas') => {
-    const dataURL = canvas?.toDataURL('png')
+    writeImage('testqq', canvas?.toDataURL('image/png').replace('data:image/png;base64,', '')).then(res => {
-
+      console.log('success', res)
-    // 이미지 다운로드 링크 생성
+    }).catch(err => {
-    const link = document.createElement('a')
+      console.log('err', err)
-    link.download = `${title}.png`
+    })
-    link.href = dataURL
-
-    // 링크 클릭하여 이미지 다운로드
-    link.click()
   }
 
   const handleFlip = () => {
@@ -568,7 +570,7 @@ export function useCanvas(id) {
     const dataUrl = tempCanvas.toDataURL({ format: 'png' })
 
     // Set the image as the background of the original canvas
-    fabric.Image.fromURL(dataUrl, function (img) {
+    fabric.Image.fromURL(dataUrl, function(img) {
       canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
         scaleX: canvas.width / img.width,
         scaleY: canvas.height / img.height,

src/lib/canvas.js

@@ -1,8 +1,10 @@
 'use server'
 
 import { PrismaClient } from '@prisma/client'
+import fs from 'fs/promises'
 
 const prisma = new PrismaClient()
+const imagePath = 'public/canvasState'
 
 export const getTests = () => {
   return prisma.test.findMany()
@@ -36,3 +38,14 @@ export const insertCanvasState = (param) => {
     data: param,
   })
 }
+
+export const writeImage = async (title, data) => {
+  // 해당 경로에 Directory 가 없다면 생성
+  try {
+    await fs.readdir(imagePath)
+  } catch {
+    await fs.mkdir(imagePath)
+  }
+
+  return fs.writeFile(`${imagePath}/${title}.png`, data, 'base64')
+}