src/hooks/floorPlan/useImgLoader.js

@@ -58,7 +58,12 @@ export function useImgLoader() {
       canvas.renderAll()
 
       const formData = new FormData()
-      const dataUrl = canvas.toDataURL('image/png')
+      // 고해상도 캡처를 위해 multiplier 옵션 추가 (2배 해상도)
+      const multiplier = 2
+      const dataUrl = canvas.toDataURL({
+        format: 'png',
+        multiplier: multiplier,
+      })
       const blobBin = atob(dataUrl.split(',')[1])
       const array = []
       for (let i = 0; i < blobBin.length; i++) {
@@ -69,13 +74,13 @@ export function useImgLoader() {
       formData.append('objectNo', currentCanvasPlan.objectNo)
       formData.append('planNo', currentCanvasPlan.planNo)
       formData.append('type', type)
-      /** 이미지 크롭 좌표 계산 */
+      /** 이미지 크롭 좌표 계산 (multiplier 배율 적용) */
       const positionObj = getImageCoordinates()
       console.log('🚀 ~ handleCanvasToPng ~ positionObj:', positionObj)
-      formData.append('width', Math.round(positionObj[1].x - positionObj[0].x + 100))
+      formData.append('width', Math.round((positionObj[1].x - positionObj[0].x + 100) * multiplier))
-      formData.append('height', Math.round(positionObj[1].y - positionObj[0].y + 100))
+      formData.append('height', Math.round((positionObj[1].y - positionObj[0].y + 100) * multiplier))
-      formData.append('left', Math.round(positionObj[0].x))
+      formData.append('left', Math.round(positionObj[0].x * multiplier))
-      formData.append('top', Math.round(positionObj[0].y))
+      formData.append('top', Math.round(positionObj[0].y * multiplier))
       console.log('🚀 ~ handleCanvasToPng ~ formData:', formData)
 
       /** 이미지 크롭 요청 */