sales-frontend-utils 0.0.54 → 0.0.55
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 +9 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -4
- package/dist/index.js.map +1 -1
- package/dist/utils/canvas-utils.cjs +9 -3
- package/dist/utils/canvas-utils.cjs.map +1 -1
- package/dist/utils/canvas-utils.d.cts +2 -1
- package/dist/utils/canvas-utils.d.ts +2 -1
- package/dist/utils/canvas-utils.js +9 -4
- package/dist/utils/canvas-utils.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
// src/utils/canvas-utils.ts
|
|
4
|
+
var getTextWidth = (text, font, context) => {
|
|
5
|
+
context.font = font;
|
|
6
|
+
const metrics = context.measureText(text);
|
|
7
|
+
return metrics.width;
|
|
8
|
+
};
|
|
4
9
|
var convertTextToImg = ({
|
|
5
10
|
targetStr,
|
|
6
11
|
canvasWidth,
|
|
@@ -16,8 +21,9 @@ var convertTextToImg = ({
|
|
|
16
21
|
if (!ctx) {
|
|
17
22
|
throw new Error("Canvas context\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
|
|
18
23
|
}
|
|
24
|
+
const font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
|
|
19
25
|
const defaultHeight = 150;
|
|
20
|
-
const calculatedWidth = targetStr
|
|
26
|
+
const calculatedWidth = getTextWidth(targetStr, font, ctx);
|
|
21
27
|
canvas.width = canvasWidth ?? calculatedWidth;
|
|
22
28
|
canvas.height = canvasHeight ?? defaultHeight;
|
|
23
29
|
if (backgroundColor) {
|
|
@@ -26,8 +32,7 @@ var convertTextToImg = ({
|
|
|
26
32
|
}
|
|
27
33
|
ctx.fillStyle = fontColor ?? "black";
|
|
28
34
|
ctx.textAlign = "center";
|
|
29
|
-
ctx.font =
|
|
30
|
-
console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
|
|
35
|
+
ctx.font = font;
|
|
31
36
|
ctx.textBaseline = "middle";
|
|
32
37
|
ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
|
|
33
38
|
return canvas.toDataURL();
|
|
@@ -66,5 +71,6 @@ function drawImageResizeCentered(base64, size) {
|
|
|
66
71
|
|
|
67
72
|
exports.convertTextToImg = convertTextToImg;
|
|
68
73
|
exports.drawImageResizeCentered = drawImageResizeCentered;
|
|
74
|
+
exports.getTextWidth = getTextWidth;
|
|
69
75
|
//# sourceMappingURL=canvas-utils.cjs.map
|
|
70
76
|
//# sourceMappingURL=canvas-utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":";;;AAqBO,IAAM,YAAe,GAAA,CAAC,IAAc,EAAA,IAAA,EAAc,OAAsC,KAAA;AAG7F,EAAA,OAAA,CAAQ,IAAO,GAAA,IAAA;AAGf,EAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,WAAA,CAAY,IAAI,CAAA;AAGxC,EAAA,OAAO,OAAQ,CAAA,KAAA;AACjB;AAUO,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,yBAAA;AACf,CAAsC,KAAA;AAEpC,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,QAAQ,CAAA;AAC9C,EAAM,MAAA,GAAA,GAAM,MAAO,CAAA,UAAA,CAAW,IAAI,CAAA;AAElC,EAAA,IAAI,CAAC,GAAK,EAAA;AAER,IAAM,MAAA,IAAI,MAAM,0EAA6B,CAAA;AAAA;AAG/C,EAAM,MAAA,IAAA,GAAO,GAAG,UAAc,IAAA,QAAQ,IAAI,QAAY,IAAA,EAAE,MAAM,UAAU,CAAA,CAAA;AAGxE,EAAA,MAAM,aAAgB,GAAA,GAAA;AAKtB,EAAA,MAAM,eAAkB,GAAA,YAAA,CAAa,SAAW,EAAA,IAAA,EAAM,GAAG,CAAA;AACzD,EAAA,MAAA,CAAO,QAAQ,WAAe,IAAA,eAAA;AAC9B,EAAA,MAAA,CAAO,SAAS,YAAgB,IAAA,aAAA;AAGhC,EAAA,IAAI,eAAiB,EAAA;AACnB,IAAA,GAAA,CAAI,SAAY,GAAA,eAAA;AAChB,IAAA,GAAA,CAAI,SAAS,CAAG,EAAA,CAAA,EAAG,MAAO,CAAA,KAAA,EAAO,OAAO,MAAM,CAAA;AAAA;AAIhD,EAAA,GAAA,CAAI,YAAY,SAAa,IAAA,OAAA;AAC7B,EAAA,GAAA,CAAI,SAAY,GAAA,QAAA;AAChB,EAAA,GAAA,CAAI,IAAO,GAAA,IAAA;AACX,EAAA,GAAA,CAAI,YAAe,GAAA,QAAA;AAGnB,EAAA,GAAA,CAAI,SAAS,SAAW,EAAA,MAAA,CAAO,QAAQ,CAAG,EAAA,MAAA,CAAO,SAAS,CAAC,CAAA;AAG3D,EAAA,OAAO,OAAO,SAAU,EAAA;AAC1B;AAEO,SAAS,uBAAA,CAAwB,QAAgB,IAAqD,EAAA;AAC3G,EAAO,OAAA,IAAI,OAAQ,CAAA,CAAC,OAAY,KAAA;AAC9B,IAAM,MAAA,EAAE,YAAc,EAAA,WAAA,EAAgB,GAAA,IAAA;AAEtC,IAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,QAAQ,CAAA;AAC9C,IAAA,MAAA,CAAO,KAAQ,GAAA,WAAA;AACf,IAAA,MAAA,CAAO,MAAS,GAAA,YAAA;AAChB,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,UAAA,CAAW,IAAI,CAAA;AAElC,IAAM,MAAA,GAAA,GAAM,IAAI,KAAM,EAAA;AACtB,IAAA,GAAA,CAAI,GAAM,GAAA,MAAA;AACV,IAAA,GAAA,CAAI,SAAS,MAAM;AACjB,MAAA,MAAM,aAAa,GAAI,CAAA,KAAA;AACvB,MAAA,MAAM,cAAc,GAAI,CAAA,MAAA;AAExB,MAAA,MAAM,cAAc,WAAc,GAAA,YAAA;AAClC,MAAA,MAAM,aAAa,UAAa,GAAA,WAAA;AAEhC,MAAI,IAAA,QAAA;AACJ,MAAI,IAAA,SAAA;AAEJ,MAAA,IAAI,aAAa,WAAa,EAAA;AAC5B,QAAW,QAAA,GAAA,WAAA;AACX,QAAA,SAAA,GAAY,QAAW,GAAA,UAAA;AAAA,OAClB,MAAA;AACL,QAAY,SAAA,GAAA,YAAA;AACZ,QAAA,QAAA,GAAW,SAAY,GAAA,UAAA;AAAA;AAGzB,MAAM,MAAA,CAAA,GAAA,CAAK,cAAc,QAAY,IAAA,CAAA;AACrC,MAAM,MAAA,CAAA,GAAA,CAAK,eAAe,SAAa,IAAA,CAAA;AAEvC,MAAA,GAAA,EAAK,SAAU,CAAA,CAAA,EAAG,CAAG,EAAA,WAAA,EAAa,YAAY,CAAA;AAC9C,MAAA,GAAA,EAAK,SAAU,CAAA,GAAA,EAAK,CAAG,EAAA,CAAA,EAAG,UAAU,SAAS,CAAA;AAE7C,MAAQ,OAAA,CAAA,MAAA,CAAO,WAAW,CAAA;AAAA,KAC5B;AAAA,GACD,CAAA;AACH","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\nexport const getTextWidth = (text: string, font: string, context: CanvasRenderingContext2D) => {\n\n // 폰트 스타일 설정\n context.font = font;\n\n // measureText()를 사용하여 TextMetrics 객체 가져오기\n const metrics = context.measureText(text);\n\n // 너비(width) 반환\n return metrics.width;\n}\n\n\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 const font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n // 2. 캔버스 크기 설정\n const defaultHeight = 150;\n\n // as-is\n // const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n const calculatedWidth = getTextWidth(targetStr, font, ctx);\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 = font;\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"]}
|
|
@@ -16,6 +16,7 @@ interface ConvertTextToImgParams {
|
|
|
16
16
|
/** 폰트 패밀리 (지정하지 않으면 기본값 ) */
|
|
17
17
|
fontFamily?: string;
|
|
18
18
|
}
|
|
19
|
+
declare const getTextWidth: (text: string, font: string, context: CanvasRenderingContext2D) => number;
|
|
19
20
|
/**
|
|
20
21
|
* 텍스트를 이미지(Base64)로 변환하는 함수
|
|
21
22
|
* @param params - 변환에 필요한 파라미터 객체
|
|
@@ -27,4 +28,4 @@ declare function drawImageResizeCentered(base64: string, size: {
|
|
|
27
28
|
canvasHeight: number;
|
|
28
29
|
}): Promise<unknown>;
|
|
29
30
|
|
|
30
|
-
export { convertTextToImg, drawImageResizeCentered };
|
|
31
|
+
export { convertTextToImg, drawImageResizeCentered, getTextWidth };
|
|
@@ -16,6 +16,7 @@ interface ConvertTextToImgParams {
|
|
|
16
16
|
/** 폰트 패밀리 (지정하지 않으면 기본값 ) */
|
|
17
17
|
fontFamily?: string;
|
|
18
18
|
}
|
|
19
|
+
declare const getTextWidth: (text: string, font: string, context: CanvasRenderingContext2D) => number;
|
|
19
20
|
/**
|
|
20
21
|
* 텍스트를 이미지(Base64)로 변환하는 함수
|
|
21
22
|
* @param params - 변환에 필요한 파라미터 객체
|
|
@@ -27,4 +28,4 @@ declare function drawImageResizeCentered(base64: string, size: {
|
|
|
27
28
|
canvasHeight: number;
|
|
28
29
|
}): Promise<unknown>;
|
|
29
30
|
|
|
30
|
-
export { convertTextToImg, drawImageResizeCentered };
|
|
31
|
+
export { convertTextToImg, drawImageResizeCentered, getTextWidth };
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
// src/utils/canvas-utils.ts
|
|
2
|
+
var getTextWidth = (text, font, context) => {
|
|
3
|
+
context.font = font;
|
|
4
|
+
const metrics = context.measureText(text);
|
|
5
|
+
return metrics.width;
|
|
6
|
+
};
|
|
2
7
|
var convertTextToImg = ({
|
|
3
8
|
targetStr,
|
|
4
9
|
canvasWidth,
|
|
@@ -14,8 +19,9 @@ var convertTextToImg = ({
|
|
|
14
19
|
if (!ctx) {
|
|
15
20
|
throw new Error("Canvas context\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
|
|
16
21
|
}
|
|
22
|
+
const font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
|
|
17
23
|
const defaultHeight = 150;
|
|
18
|
-
const calculatedWidth = targetStr
|
|
24
|
+
const calculatedWidth = getTextWidth(targetStr, font, ctx);
|
|
19
25
|
canvas.width = canvasWidth ?? calculatedWidth;
|
|
20
26
|
canvas.height = canvasHeight ?? defaultHeight;
|
|
21
27
|
if (backgroundColor) {
|
|
@@ -24,8 +30,7 @@ var convertTextToImg = ({
|
|
|
24
30
|
}
|
|
25
31
|
ctx.fillStyle = fontColor ?? "black";
|
|
26
32
|
ctx.textAlign = "center";
|
|
27
|
-
ctx.font =
|
|
28
|
-
console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
|
|
33
|
+
ctx.font = font;
|
|
29
34
|
ctx.textBaseline = "middle";
|
|
30
35
|
ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
|
|
31
36
|
return canvas.toDataURL();
|
|
@@ -62,6 +67,6 @@ function drawImageResizeCentered(base64, size) {
|
|
|
62
67
|
});
|
|
63
68
|
}
|
|
64
69
|
|
|
65
|
-
export { convertTextToImg, drawImageResizeCentered };
|
|
70
|
+
export { convertTextToImg, drawImageResizeCentered, getTextWidth };
|
|
66
71
|
//# sourceMappingURL=canvas-utils.js.map
|
|
67
72
|
//# sourceMappingURL=canvas-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":";
|
|
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\nexport const getTextWidth = (text: string, font: string, context: CanvasRenderingContext2D) => {\n\n // 폰트 스타일 설정\n context.font = font;\n\n // measureText()를 사용하여 TextMetrics 객체 가져오기\n const metrics = context.measureText(text);\n\n // 너비(width) 반환\n return metrics.width;\n}\n\n\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 const font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n // 2. 캔버스 크기 설정\n const defaultHeight = 150;\n\n // as-is\n // const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n const calculatedWidth = getTextWidth(targetStr, font, ctx);\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 = font;\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.55",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -158,8 +158,8 @@
|
|
|
158
158
|
"@types/react": "19.1.0",
|
|
159
159
|
"tsup": "^8.4.0",
|
|
160
160
|
"typescript": "5.8.2",
|
|
161
|
-
"sales-frontend-
|
|
162
|
-
"
|
|
161
|
+
"eslint-config-sales-frontend-eslint-config-v8": "^0.0.7",
|
|
162
|
+
"sales-frontend-typescript-config": "0.0.2"
|
|
163
163
|
},
|
|
164
164
|
"scripts": {
|
|
165
165
|
"lint": "eslint . --max-warnings 0",
|