sales-frontend-utils 0.0.52 → 0.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/utils/canvas-utils.cjs +3 -3
- package/dist/utils/canvas-utils.cjs.map +1 -1
- package/dist/utils/canvas-utils.js +3 -3
- package/dist/utils/canvas-utils.js.map +1 -1
- package/package.json +3 -3
|
@@ -9,7 +9,7 @@ var convertTextToImg = ({
|
|
|
9
9
|
fontColor,
|
|
10
10
|
fontSize,
|
|
11
11
|
fontWeight,
|
|
12
|
-
fontFamily = `'
|
|
12
|
+
fontFamily = `'system-ui', 'sans-serif'`
|
|
13
13
|
}) => {
|
|
14
14
|
const canvas = document.createElement("canvas");
|
|
15
15
|
const ctx = canvas.getContext("2d");
|
|
@@ -26,8 +26,8 @@ var convertTextToImg = ({
|
|
|
26
26
|
}
|
|
27
27
|
ctx.fillStyle = fontColor ?? "black";
|
|
28
28
|
ctx.textAlign = "center";
|
|
29
|
-
ctx.font = `${fontWeight ?? "
|
|
30
|
-
console.log("font", `${fontWeight ?? "
|
|
29
|
+
ctx.font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
|
|
30
|
+
console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
|
|
31
31
|
ctx.textBaseline = "middle";
|
|
32
32
|
ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
|
|
33
33
|
return canvas.toDataURL();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":";;;AAwBO,IAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.cjs","sourcesContent":["interface ConvertTextToImgParams {\n /** 이미지로 변환할 문자열 */\n targetStr: string;\n /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n canvasWidth?: number;\n /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n canvasHeight?: number;\n /** 배경색 (지정하지 않으면 투명) */\n backgroundColor?: string;\n /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n fontSize?: number;\n /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n fontColor?: string;\n /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n fontWeight?: string;\n /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n fontFamily?: string;\n}\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n targetStr,\n canvasWidth,\n canvasHeight,\n backgroundColor,\n fontColor,\n fontSize,\n fontWeight,\n fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n // 1. 메모리에 캔버스 요소 생성\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n if (!ctx) {\n // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n throw new Error('Canvas context를 가져올 수 없습니다.');\n }\n\n // 2. 캔버스 크기 설정\n const defaultHeight = 150;\n const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n canvas.width = canvasWidth ?? calculatedWidth;\n canvas.height = canvasHeight ?? defaultHeight;\n\n // 3. 배경색 처리\n if (backgroundColor) {\n ctx.fillStyle = backgroundColor;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n }\n\n // 4. 텍스트 그리기\n ctx.fillStyle = fontColor ?? 'black';\n ctx.textAlign = 'center';\n ctx.font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n console.log('font', `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`);\n ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n // 텍스트를 캔버스 중앙에 그립니다.\n ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n // 5. Base64 이미지 데이터로 변환하여 반환\n return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n return new Promise((resolve) => {\n const { canvasHeight, canvasWidth } = size;\n\n const canvas = document.createElement('canvas');\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n const ctx = canvas.getContext('2d');\n\n const img = new Image();\n img.src = base64;\n img.onload = () => {\n const imageWidth = img.width;\n const imageHeight = img.height;\n\n const canvasRatio = canvasWidth / canvasHeight;\n const imageRatio = imageWidth / imageHeight;\n\n let newWidth;\n let newHeight;\n\n if (imageRatio > canvasRatio) {\n newWidth = canvasWidth;\n newHeight = newWidth / imageRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = newHeight * imageRatio;\n }\n\n const x = (canvasWidth - newWidth) / 2;\n const y = (canvasHeight - newHeight) / 2;\n\n ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n resolve(canvas.toDataURL());\n };\n });\n}\n"]}
|
|
@@ -7,7 +7,7 @@ var convertTextToImg = ({
|
|
|
7
7
|
fontColor,
|
|
8
8
|
fontSize,
|
|
9
9
|
fontWeight,
|
|
10
|
-
fontFamily = `'
|
|
10
|
+
fontFamily = `'system-ui', 'sans-serif'`
|
|
11
11
|
}) => {
|
|
12
12
|
const canvas = document.createElement("canvas");
|
|
13
13
|
const ctx = canvas.getContext("2d");
|
|
@@ -24,8 +24,8 @@ var convertTextToImg = ({
|
|
|
24
24
|
}
|
|
25
25
|
ctx.fillStyle = fontColor ?? "black";
|
|
26
26
|
ctx.textAlign = "center";
|
|
27
|
-
ctx.font = `${fontWeight ?? "
|
|
28
|
-
console.log("font", `${fontWeight ?? "
|
|
27
|
+
ctx.font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
|
|
28
|
+
console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
|
|
29
29
|
ctx.textBaseline = "middle";
|
|
30
30
|
ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
|
|
31
31
|
return canvas.toDataURL();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":";AAwBO,IAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.js","sourcesContent":["interface ConvertTextToImgParams {\n /** 이미지로 변환할 문자열 */\n targetStr: string;\n /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n canvasWidth?: number;\n /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n canvasHeight?: number;\n /** 배경색 (지정하지 않으면 투명) */\n backgroundColor?: string;\n /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n fontSize?: number;\n /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n fontColor?: string;\n /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n fontWeight?: string;\n /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n fontFamily?: string;\n}\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n targetStr,\n canvasWidth,\n canvasHeight,\n backgroundColor,\n fontColor,\n fontSize,\n fontWeight,\n fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n // 1. 메모리에 캔버스 요소 생성\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n if (!ctx) {\n // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n throw new Error('Canvas context를 가져올 수 없습니다.');\n }\n\n // 2. 캔버스 크기 설정\n const defaultHeight = 150;\n const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n canvas.width = canvasWidth ?? calculatedWidth;\n canvas.height = canvasHeight ?? defaultHeight;\n\n // 3. 배경색 처리\n if (backgroundColor) {\n ctx.fillStyle = backgroundColor;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n }\n\n // 4. 텍스트 그리기\n ctx.fillStyle = fontColor ?? 'black';\n ctx.textAlign = 'center';\n ctx.font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n console.log('font', `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`);\n ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n // 텍스트를 캔버스 중앙에 그립니다.\n ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n // 5. Base64 이미지 데이터로 변환하여 반환\n return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n return new Promise((resolve) => {\n const { canvasHeight, canvasWidth } = size;\n\n const canvas = document.createElement('canvas');\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n const ctx = canvas.getContext('2d');\n\n const img = new Image();\n img.src = base64;\n img.onload = () => {\n const imageWidth = img.width;\n const imageHeight = img.height;\n\n const canvasRatio = canvasWidth / canvasHeight;\n const imageRatio = imageWidth / imageHeight;\n\n let newWidth;\n let newHeight;\n\n if (imageRatio > canvasRatio) {\n newWidth = canvasWidth;\n newHeight = newWidth / imageRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = newHeight * imageRatio;\n }\n\n const x = (canvasWidth - newWidth) / 2;\n const y = (canvasHeight - newHeight) / 2;\n\n ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n resolve(canvas.toDataURL());\n };\n });\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sales-frontend-utils",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.53",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -147,8 +147,8 @@
|
|
|
147
147
|
"@types/node": "^22.14.1",
|
|
148
148
|
"tsup": "^8.4.0",
|
|
149
149
|
"typescript": "5.8.2",
|
|
150
|
-
"sales-frontend-
|
|
151
|
-
"
|
|
150
|
+
"eslint-config-sales-frontend-eslint-config-v8": "^0.0.7",
|
|
151
|
+
"sales-frontend-typescript-config": "0.0.2"
|
|
152
152
|
},
|
|
153
153
|
"scripts": {
|
|
154
154
|
"lint": "eslint . --max-warnings 0",
|