mjpic 1.0.5 → 1.0.7

package/.vercel/project.json

@@ -0,0 +1 @@
+{"neverMindDeployCard":true}

package/README.md

@@ -1,57 +1,147 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+# 敏捷图片 (mjpic)
+
+敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。
+
+## 特性
+
+- **轻量级**：无需安装庞大的软件，即开即用。
+- **本地处理**：图片不上传服务器，保护隐私。
+- **功能丰富**：支持裁剪、旋转、尺寸调整、边框添加等常用功能。
+- **CLI 支持**：提供命令行工具，方便快速打开和处理图片。
+
+## 安装
+
+```bash
+npm install -g mjpic
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  extends: [
-    // other configs...
-    // Enable lint rules for React
-    reactX.configs['recommended-typescript'],
-    // Enable lint rules for React DOM
-    reactDom.configs.recommended,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+## 使用
+
+### 命令行模式
+
+打开指定图片：
+```bash
+mjpic path/to/image.jpg
 ```
+
+启动服务：
+```bash
+mjpic start
+# 或
+mjpic dev
+```
+
+### 网页模式
+
+访问部署后的网页即可使用。
+
+## 开发
+
+1. 克隆仓库
+2. 安装依赖：`npm install`
+3. 启动开发服务器：`npm run dev`
+
+
+## 安装使用
+
+### 安装
+
+Q：Arm架构的麒麟操作系统V10如何安装Node.js？
+
+■ 豆包：
+
+方法一：直接手工安装
+
+访问Node.js官网 https://nodejs.org/zh-cn/download
+
+    uname -m    # aarch64表示系统架构是ARM64
+
+下载Linux ARM64版本
+
+    cd ~/下载
+    wget https://nodejs.org/dist/v24.13.1/node-v24.13.1-linux-arm64.tar.xz
+    tar -xvf node-xxx-arm64.tar.xz
+    sudo mv node-xxx-arm64 /usr/local/nodejs
+
+配置环境变量
+
+    sudo vim /etc/profile
+        export NODE_HOME=/usr/local/nodejs
+        export PATH=$NODE_HOME/bin:$PATH
+    source /etc/profile
+
+测试安装是否成功
+
+    node -v
+
+方法二：配合`/deploy/node_install.sh`脚本安装
+
+1. 保存`node_install.sh 到`下载 目录。
+
+2. 打开终端（terminal）。
+
+3. 进入下载目录：
+
+    cd ~/下载
+
+4. 赋予脚本可执行权限：
+
+    chmod +x node_install.sh
+
+5. 以root权限运行脚本：
+
+    sudo ./node_install.sh
+
+6. 使环境变量生效
+
+    source ~/.bashrc
+
+7. 下载 敏捷图片(mjpic)：
+
+    npm install mjpic@latest
+
+8. 运行 敏捷图片（mjpic）：
+
+    npx mjpic build --port 3030
+
+### 创建桌面快捷方式
+
+Q：如何在麒麟操作系统V10的桌面创建一个快捷方式，单击后直接在终端运行 npx mjpic build --port 3030 命令？
+
+■ 豆包：
+
+方法一：
+
+    cd ~/桌面
+    
+    vim mjpic-start.desktop
+    
+    [Desktop Entry]
+    快捷方式类型（应用程序）
+    Type=Application
+    显示名称（桌面显示的文件名）
+    Name=敏捷图片
+    注释（鼠标悬停显示）
+    Comment=启动mjpic服务，端口3030
+    图标（可选，可替换为自己的图标路径，也可留空）
+    Icon=image
+    关键：执行的命令（xterm/gnome-terminal 打开终端并执行命令）
+    麒麟V10优先用 gnome-terminal，若不行换 xterm
+    Exec=mate-terminal -- bash --login -c "source ~/.bashrc; npx mjpic build --port 3030; exec bash"
+    执行终端窗口是否保持打开（yes=执行完不关闭，no=执行完关闭）
+    Terminal=yes
+    分类（桌面显示的归类）
+    Categories=Graphics
+    编码
+    Encoding=UTF-8
+    是否允许执行
+    Executable=true
+    
+    chmod +x ~/桌面/mjpic-start.desktop
+
+注：如有相关提示，选择始终允许执行。
+
+
+方法二：
+
+9. 关闭终端，保存 mjpic-start.desktop 到 桌面，右键属性勾选可执行权限。双击新建图标运行。

package/api/cli.ts

@@ -5,6 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import open from 'open';
+import net from 'net';
 import app from './app.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -12,8 +13,46 @@ const __dirname = path.dirname(__filename);
 
 const program = new Command();
 
-const startServer = async (options: { port: string; host: string }, file?: string) => {
-  const port = parseInt(options.port, 10);
+// Check if a port is available
+const isPortAvailable = (port: number): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port);
+  });
+};
+
+// Generate a random port between min and max, excluding common ports
+const getRandomPort = async (): Promise<number> => {
+  const commonPorts = [3000, 5000, 5173, 8000, 8080, 8888, 4200];
+  const min = 10000;
+  const max = 65535;
+  
+  // Try up to 50 times to find a port
+  for (let i = 0; i < 50; i++) {
+    const port = Math.floor(Math.random() * (max - min + 1) + min);
+    if (!commonPorts.includes(port) && await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  
+  // Fallback to 0 (let OS choose) if we can't find one, though OS might pick a common one (unlikely)
+  return 0;
+};
+
+const startServer = async (options: { port?: string; host: string }, file?: string) => {
+  let port: number;
+  
+  if (options.port) {
+    port = parseInt(options.port, 10);
+  } else {
+    port = await getRandomPort();
+  }
+  
   const host = options.host;
 
   if (file) {
@@ -53,12 +92,12 @@ const startServer = async (options: { port: string; host: string }, file?: strin
 
 program
   .name('mjpic')
-  .description('敏捷图片 - 轻量级图片处理工具')
-  .version('1.0.5');
+  .description('敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。')
+  .version('1.0.6');
 
 const attachServeOptions = (cmd: Command) => {
   cmd
-    .option('-p, --port <number>', 'server port', '3000')
+    .option('-p, --port <number>', 'server port')
     .option('--host <string>', 'server host', 'localhost')
     .argument('[file]', 'image file to open')
     .action(async (file, options) => {

package/deploy/mjpic-start.desktop

@@ -0,0 +1,20 @@
+[Desktop Entry]
+# 快捷方式类型（应用程序）
+Type=Application
+# 显示名称（桌面显示的文件名）
+Name=敏捷图片
+# 注释（鼠标悬停显示）
+Comment=启动mjpic服务，端口3030
+# 图标（可选，可替换为自己的图标路径，也可留空）
+Icon=image
+# 关键：执行的命令（xterm/gnome-terminal 打开终端并执行命令）
+# 麒麟V10优先用 gnome-terminal，若不行换 xterm
+Exec=mate-terminal -- bash --login -c "source ~/.bashrc; npx mjpic build --port 3030; exec bash"
+# 执行终端窗口是否保持打开（yes=执行完不关闭，no=执行完关闭）
+Terminal=yes
+# 分类（桌面显示的归类）
+Categories=Graphics
+# 编码
+Encoding=UTF-8
+# 是否允许执行
+Executable=true

package/deploy/node_install.sh

@@ -0,0 +1,111 @@
+#!/bin/bash
+# Node.js ARM64架构 麒麟V10 自动安装脚本
+# 版本：v24.13.1
+# 修复：sudo执行时使用原始用户目录 + 环境变量全局生效
+
+# 定义Node.js版本和下载地址
+NODE_VERSION="v24.13.1"
+NODE_ARCH="linux-arm64"
+NODE_PACKAGE="node-${NODE_VERSION}-${NODE_ARCH}.tar.xz"
+DOWNLOAD_URL="https://nodejs.org/dist/${NODE_VERSION}/${NODE_PACKAGE}"
+INSTALL_DIR="/usr/local/nodejs"
+
+# 关键修复1：获取执行sudo前的原始用户（而非root）
+ORIGINAL_USER=${SUDO_USER:-$USER}
+ORIGINAL_USER_HOME="/home/${ORIGINAL_USER}"
+DOWNLOAD_DIR="${ORIGINAL_USER_HOME}/下载"
+
+# 检查是否为root权限（移动文件需要sudo）
+if [ $EUID -ne 0 ]; then
+    echo "错误：请使用root权限运行此脚本（sudo ./node_install.sh）"
+    exit 1
+fi
+
+# 步骤1：进入原始用户的下载目录
+echo "===== 进入原始用户(${ORIGINAL_USER})的下载目录：${DOWNLOAD_DIR} ====="
+cd "${DOWNLOAD_DIR}" || {
+    echo "错误：${DOWNLOAD_DIR} 目录不存在，创建该目录..."
+    mkdir -p "${DOWNLOAD_DIR}"
+    chown "${ORIGINAL_USER}:${ORIGINAL_USER}" "${DOWNLOAD_DIR}"
+    cd "${DOWNLOAD_DIR}"
+}
+
+# 步骤2：下载Node.js安装包
+echo -e "\n===== 开始下载Node.js ${NODE_VERSION} ====="
+if [ -f "${NODE_PACKAGE}" ]; then
+    echo "检测到已存在同名安装包，跳过下载..."
+else
+    wget "${DOWNLOAD_URL}" -O "${NODE_PACKAGE}" || {
+        echo "下载失败！请更换淘宝镜像源："
+        echo "DOWNLOAD_URL=\"https://npm.taobao.org/mirrors/node/${NODE_VERSION}/${NODE_PACKAGE}\""
+        exit 1
+    }
+    chown "${ORIGINAL_USER}:${ORIGINAL_USER}" "${NODE_PACKAGE}"
+fi
+
+# 步骤3：解压安装包
+echo -e "\n===== 解压安装包 ====="
+tar -xvf "${NODE_PACKAGE}" || {
+    echo "解压失败！安装包可能损坏，请删除后重新下载"
+    exit 1
+}
+chown -R "${ORIGINAL_USER}:${ORIGINAL_USER}" "node-${NODE_VERSION}-${NODE_ARCH}"
+
+# 步骤4：移动到系统目录
+echo -e "\n===== 移动安装目录到 ${INSTALL_DIR} ====="
+if [ -d "${INSTALL_DIR}" ]; then
+    echo "检测到已存在${INSTALL_DIR}，先备份并删除..."
+    mv "${INSTALL_DIR}" "${INSTALL_DIR}_bak_$(date +%Y%m%d%H%M%S)"
+fi
+mv "node-${NODE_VERSION}-${NODE_ARCH}" "${INSTALL_DIR}" || {
+    echo "移动目录失败！请检查权限"
+    exit 1
+}
+
+# 步骤5：配置环境变量（关键修复2：确保全局生效）
+echo -e "\n===== 配置系统环境变量 ====="
+# 方案1：写入/etc/profile（系统级，所有用户生效）
+if ! grep -q "NODE_HOME=${INSTALL_DIR}" /etc/profile; then
+    echo "" >> /etc/profile
+    echo "# Node.js environment variables" >> /etc/profile
+    echo "export NODE_HOME=${INSTALL_DIR}" >> /etc/profile
+    echo "export PATH=\$NODE_HOME/bin:\$PATH" >> /etc/profile
+    echo "系统级环境变量已添加到/etc/profile"
+else
+    echo "系统级环境变量已存在，无需重复添加"
+fi
+
+# 方案2：写入原始用户的~/.bashrc（用户级，避免source失效）
+USER_BASHRC="${ORIGINAL_USER_HOME}/.bashrc"
+if ! grep -q "NODE_HOME=${INSTALL_DIR}" "${USER_BASHRC}"; then
+    echo "" >> "${USER_BASHRC}"
+    echo "# Node.js environment variables" >> "${USER_BASHRC}"
+    echo "export NODE_HOME=${INSTALL_DIR}" >> "${USER_BASHRC}"
+    echo "export PATH=\$NODE_HOME/bin:\$PATH" >> "${USER_BASHRC}"
+    chown "${ORIGINAL_USER}:${ORIGINAL_USER}" "${USER_BASHRC}"
+    echo "用户级环境变量已添加到${USER_BASHRC}"
+else
+    echo "用户级环境变量已存在，无需重复添加"
+fi
+
+# 步骤6：验证安装（直接用绝对路径验证，避免环境变量未生效的误判）
+echo -e "\n===== 验证安装结果 ====="
+# 直接使用Node.js的绝对路径验证，不受当前shell环境影响
+NODE_ABS_PATH="${INSTALL_DIR}/bin/node"
+NPM_ABS_PATH="${INSTALL_DIR}/bin/npm"
+
+if [ -f "${NODE_ABS_PATH}" ] && [ -f "${NPM_ABS_PATH}" ]; then
+    echo "Node.js 绝对路径验证：$(${NODE_ABS_PATH} -v)"
+    echo "npm 绝对路径验证：$(${NPM_ABS_PATH} -v)"
+    echo -e "\n===== 安装成功！====="
+    echo "注意：环境变量需以下方式生效："
+    echo "1. 普通用户执行：source ~/.bashrc  （立即生效）"
+    echo "2. 或重启终端/重新登录（永久生效）"
+    echo "3. 验证命令：node -v && npm -v"
+else
+    echo -e "\n===== 安装失败！====="
+    echo "未找到Node.js/npm的可执行文件，请检查安装目录：${INSTALL_DIR}/bin"
+    exit 1
+fi
+
+exit 0

package/deploy//344/275/277/347/224/250/350/257/264/346/230/216.txt

@@ -0,0 +1,17 @@
+# 敏捷图片（mjpic）安装使用说明
+
+1. 保存 node_install.sh 到 下载 目录。
+2. 打开终端（terminal）。
+3. 进入下载目录：
+cd ~/下载
+4. 赋予脚本可执行权限：
+chmod +x node_install.sh
+5. 以root权限运行脚本：
+sudo ./node_install.sh
+6. 使环境变量生效
+source ~/.bashrc
+7. 下载 敏捷图片(mjpic)：
+npm install mjpic@latest
+8. 运行 敏捷图片（mjpic）：
+npx mjpic build --port 3030
+9. 关闭终端，保存 mjpic-start.desktop 到 桌面，右键属性勾选可执行权限。双击新建图标运行。

package/dist/cli/cli.js

@@ -5,12 +5,46 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import open from 'open';
+import net from 'net';
 import app from './app.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const program = new Command();
+// Check if a port is available
+const isPortAvailable = (port) => {
+    return new Promise((resolve) => {
+        const server = net.createServer();
+        server.once('error', () => resolve(false));
+        server.once('listening', () => {
+            server.close();
+            resolve(true);
+        });
+        server.listen(port);
+    });
+};
+// Generate a random port between min and max, excluding common ports
+const getRandomPort = async () => {
+    const commonPorts = [3000, 5000, 5173, 8000, 8080, 8888, 4200];
+    const min = 10000;
+    const max = 65535;
+    // Try up to 50 times to find a port
+    for (let i = 0; i < 50; i++) {
+        const port = Math.floor(Math.random() * (max - min + 1) + min);
+        if (!commonPorts.includes(port) && await isPortAvailable(port)) {
+            return port;
+        }
+    }
+    // Fallback to 0 (let OS choose) if we can't find one, though OS might pick a common one (unlikely)
+    return 0;
+};
 const startServer = async (options, file) => {
-    const port = parseInt(options.port, 10);
+    let port;
+    if (options.port) {
+        port = parseInt(options.port, 10);
+    }
+    else {
+        port = await getRandomPort();
+    }
     const host = options.host;
     if (file) {
         const absPath = path.resolve(file);
@@ -43,11 +77,11 @@ const startServer = async (options, file) => {
 };
 program
     .name('mjpic')
-    .description('敏捷图片 - 轻量级图片处理工具')
-    .version('1.0.5');
+    .description('敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。')
+    .version('1.0.6');
 const attachServeOptions = (cmd) => {
     cmd
-        .option('-p, --port <number>', 'server port', '3000')
+        .option('-p, --port <number>', 'server port')
         .option('--host <string>', 'server host', 'localhost')
         .argument('[file]', 'image file to open')
         .action(async (file, options) => {

package/dist/client/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>敏捷图片 - mjpic</title>
+    <meta name="description" content="敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。" />
+    <title>敏捷图片 (mjpic) - 轻量级网页版图片处理工具</title>
     <script type="module" crossorigin src="/assets/index-BQfYCBRX.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BoiS81Ei.css">
   </head>

package/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>敏捷图片 - mjpic</title>
+    <meta name="description" content="敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。" />
+    <title>敏捷图片 (mjpic) - 轻量级网页版图片处理工具</title>
     <script type="module">
       if (import.meta.hot?.on) {
         import.meta.hot.on('vite:error', (error) => {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "mjpic",
-  "version": "1.0.5",
+  "description": "敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。",
+  "version": "1.0.7",
   "type": "module",
   "bin": {
     "mjpic": "./dist/cli/cli.js"
@@ -13,8 +14,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "check": "tsc --noEmit",
-    "server:dev": "nodemon",
-    "dev": "concurrently \"npm run client:dev\" \"npm run server:dev\""
+    "server:dev": "PORT=${PORT:-3002} nodemon",
+    "dev": "export PORT=$(node scripts/get-random-port.js) && export CLIENT_PORT=$(node scripts/get-random-port.js) && echo \"Starting Backend on $PORT, Frontend on $CLIENT_PORT\" && concurrently \"npm run client:dev\" \"npm run server:dev\""
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -29,6 +30,7 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "konva": "^9.3.16",
     "lucide-react": "^0.511.0",
+    "mjpic": "^1.0.6",
     "open": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/scripts/get-random-port.js

@@ -0,0 +1,40 @@
+import net from 'net';
+
+// Check if a port is available
+const isPortAvailable = (port) => {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port);
+  });
+};
+
+// Generate a random port between min and max, excluding common ports
+const getRandomPort = async () => {
+  const commonPorts = [3000, 5000, 5173, 8000, 8080, 8888, 4200];
+  const min = 10000;
+  const max = 65535;
+  
+  // Try up to 50 times to find a port
+  for (let i = 0; i < 50; i++) {
+    const port = Math.floor(Math.random() * (max - min + 1) + min);
+    if (!commonPorts.includes(port) && await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  
+  // Fallback to 0 (let OS choose)
+  return 0;
+};
+
+// Run if called directly
+const run = async () => {
+  const port = await getRandomPort();
+  console.log(port);
+};
+
+run();

package/src/components/dialogs/SaveDialog.tsx

@@ -137,7 +137,7 @@ export const SaveDialog = ({ isOpen, onClose, onConfirm, defaultPath, defaultFil
               {t('common.cancel')}
             </button>
             <button 
-              onClick={() => onConfirm(format, quality / 100, savePath, fileName)}
+              onClick={() => onConfirm(format, quality, savePath, fileName)}
               className="flex-1 px-3 py-2 rounded bg-blue-600 hover:bg-blue-500 text-white text-sm transition-colors"
             >
               {t('common.confirm')}

package/src/components/layout/Header.tsx

@@ -39,30 +39,55 @@ export const Header = ({ stageRef }: HeaderProps) => {
     if (!stageRef.current) return;
     
     try {
-        // Find the image node to get current scale
-        const imageNode = stageRef.current.findOne('Image') as Konva.Image;
-        // Find the content group (which contains image + border)
-        const contentGroup = stageRef.current.findOne('#content-group') as Konva.Group;
+        // Get the current state from the image store
+        const { previewImage, config, originalWidth, originalHeight } = useImageStore.getState();
         
-        if (!imageNode || !contentGroup) {
-            console.error('No image or content group found to save');
+        if (!previewImage) {
+            console.error('No image found to save');
             return;
         }
-
-        // Store current scale to restore later
-        const currentScaleX = imageNode.scaleX();
         
-        // Calculate pixelRatio needed to get original resolution
-        // The content is scaled down by currentScaleX to fit screen.
-        // We need to scale it back up by 1/currentScaleX.
-        const pixelRatio = 1 / currentScaleX;
-
-        const dataUrl = contentGroup.toDataURL({ 
-            pixelRatio: pixelRatio,
-            mimeType: format,
-            quality: quality
+        // Determine the final dimensions based on resize config
+        let finalWidth = originalWidth || 800;
+        let finalHeight = originalHeight || 600;
+        
+        if (config.resize && config.resize.width > 0 && config.resize.height > 0) {
+            finalWidth = config.resize.width;
+            finalHeight = config.resize.height;
+        }
+        
+        // Create a temporary canvas with the correct dimensions
+        const canvas = document.createElement('canvas');
+        canvas.width = finalWidth;
+        canvas.height = finalHeight;
+        const ctx = canvas.getContext('2d');
+        
+        if (!ctx) {
+            console.error('Failed to create canvas context');
+            return;
+        }
+        
+        // Set high quality rendering
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        
+        // Load the preview image as the source
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        
+        await new Promise<void>((resolve, reject) => {
+            img.onload = () => {
+                // Draw the image with the correct dimensions
+                ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
+                resolve();
+            };
+            img.onerror = reject;
+            img.src = previewImage;
         });
         
+        // Convert canvas to data URL with correct quality
+        const dataUrl = canvas.toDataURL(format, quality / 100);
+        
         // Check if we are in CLI mode with an opened file
         // If savePath is provided (from dialog), use it
         if (savePath) {

package/src/components/layout/RightPanel.tsx

@@ -428,27 +428,6 @@ export const RightPanel = () => {
                 <label htmlFor="maintainAspectRatio" className="text-xs text-zinc-400 cursor-pointer">{t('common.lockAspectRatio')}</label>
               </div>
             </div>
-            
-            <div className="flex gap-3 mt-2">
-              <button 
-                onClick={() => {
-                  // 确定按钮的逻辑
-                  // 这里可以添加额外的验证或处理
-                }}
-                className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium"
-              >
-                {t('common.confirm')}
-              </button>
-              <button 
-                onClick={() => {
-                  // 取消按钮的逻辑
-                  // 可以重置为之前的尺寸或保持不变
-                }}
-                className="flex-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 py-2 rounded text-sm"
-              >
-                {t('common.cancel')}
-              </button>
-            </div>
           </div>
         </div>
       )}

package/vite.config.ts

@@ -15,9 +15,11 @@ export default defineConfig({
     tsconfigPaths(),
   ],
   server: {
+    port: parseInt(process.env.CLIENT_PORT || '5173'),
+    strictPort: true, // Fail if port is busy
     proxy: {
       '/api': {
-        target: 'http://localhost:3002',
+        target: `http://localhost:${process.env.PORT || 3002}`,
         changeOrigin: true,
         secure: false,
         configure: (proxy, _options) => {