easyscreen-shot 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 JASON-QWeb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# EasyScreenShot (EasyShot)
+
+
+## 核心优势
+
+- 支持输入截图尺寸
+- 支持连续截图
+- 支持边调整后方内容边截图
+
+## 安装
+
+```bash
+npm install -g .
+```
+
+## 使用方法
+
+### 基础截图
+```bash
+easyshot
+```
+
+### 连续截图 (-w)
+截图后不退出，保持取景框位置，适合连续截取同一位置的内容
+```bash
+easyshot -w
+```
+
+### 自定义保存路径 (-o)
+将截图保存到指定文件夹
+```bash
+easyshot -o ~/Documents
+```
+
+### 查看帮助 (-h)
+```bash
+easyshot -h
+```

package/bin/config.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const CONFIG_PATH = path.join(os.homedir(), '.easyshot-config.json');
+
+function loadConfig() {
+    try {
+        if (fs.existsSync(CONFIG_PATH)) {
+            const data = fs.readFileSync(CONFIG_PATH, 'utf-8');
+            return JSON.parse(data);
+        }
+    } catch (error) {
+        console.error('Error loading config:', error.message);
+    }
+    return {};
+}
+
+function saveConfig(config) {
+    try {
+        fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2), 'utf-8');
+    } catch (error) {
+        console.error('Error saving config:', error.message);
+    }
+}
+
+module.exports = {
+    loadConfig,
+    saveConfig
+};

package/bin/easyshot.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { spawn } = require('child_process');
+const electron = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+const { loadConfig, saveConfig } = require('./config');
+
+program
+    .name('easyshot')
+    .description('EasyScreenShot CLI Tool')
+    .version('1.0.0', '-v, --version', 'output the version number')
+    .option('-w, --watch', 'Watch mode: Consistent capture (Do not exit after capture)', false)
+    .option('-o, --output <dir>', 'Set default output directory for screenshots');
+
+program.parse(process.argv);
+
+const options = program.opts();
+
+// Handle -o / --output as configuration setter
+if (options.output) {
+    const absPath = path.resolve(process.cwd(), options.output);
+    if (!fs.existsSync(absPath)) {
+        console.error(`Error: Directory does not exist: ${absPath}`);
+        process.exit(1);
+    }
+
+    const config = loadConfig();
+    config.defaultOutput = absPath;
+    saveConfig(config);
+
+    console.log(`✅ Default output directory updated to: ${absPath}`);
+    process.exit(0);
+}
+
+// Launch Application
+const isWatch = options.watch;
+const mainPath = path.join(__dirname, '..', 'main.js');
+const appArgs = [];
+
+if (isWatch) appArgs.push('--watch');
+
+// Load default output from config
+const config = loadConfig();
+if (config.defaultOutput) {
+    // Verify it still exists
+    if (fs.existsSync(config.defaultOutput)) {
+        appArgs.push('--output', config.defaultOutput);
+    } else {
+        console.warn(`⚠️ Configured output directory not found (${config.defaultOutput}). Using default (Desktop).`);
+    }
+}
+
+const child = spawn(electron, [mainPath, ...appArgs], { stdio: 'inherit' });
+
+child.on('close', (code) => {
+    process.exit(code);
+});

package/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <!-- The selection box (View Finder) -->
+    <div id="selection-box">
+        <!-- Resize Handles -->
+        <div class="handle nw" data-dir="nw"></div>
+        <div class="handle n" data-dir="n"></div>
+        <div class="handle ne" data-dir="ne"></div>
+        <div class="handle e" data-dir="e"></div>
+        <div class="handle se" data-dir="se"></div>
+        <div class="handle s" data-dir="s"></div>
+        <div class="handle sw" data-dir="sw"></div>
+        <div class="handle w" data-dir="w"></div>
+
+        <!-- Toolbar -->
+        <div id="toolbar">
+            <div class="inputs">
+                <label>W: <input type="number" id="width-input"></label>
+                <label>H: <input type="number" id="height-input"></label>
+            </div>
+            <div class="actions">
+                <button id="close-btn" class="icon-btn cancel" title="Close">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+                <button id="save-btn" class="icon-btn save" title="Save">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="renderer.js"></script>
+</body>
+
+</html>

package/main.js

@@ -0,0 +1,119 @@
+const { app, BrowserWindow, ipcMain, desktopCapturer, screen } = require('electron');
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+
+let mainWindow;
+
+// Parse args manually since Electron combines own args
+// Structure is: electron_binary main.js --watch --output ...
+const args = process.argv.slice(2);
+const isWatch = args.includes('--watch');
+let outputDir = path.join(os.homedir(), 'Desktop');
+
+const outputIndex = args.indexOf('--output');
+if (outputIndex !== -1 && args[outputIndex + 1]) {
+    outputDir = args[outputIndex + 1];
+}
+
+function createWindow() {
+    const primaryDisplay = screen.getPrimaryDisplay();
+    const { width, height } = primaryDisplay.bounds;
+
+    mainWindow = new BrowserWindow({
+        width,
+        height,
+        x: 0,
+        y: 0,
+        frame: false,
+        transparent: true,
+        alwaysOnTop: true,
+        skipTaskbar: true,
+        resizable: false,
+        movable: false,
+        hasShadow: false,
+        enableLargerThanScreen: true,
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
+        },
+    });
+
+    mainWindow.loadFile('index.html');
+    mainWindow.setIgnoreMouseEvents(true, { forward: true });
+}
+
+app.whenReady().then(() => {
+    createWindow();
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) createWindow();
+    });
+});
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') app.quit();
+});
+
+ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) win.setIgnoreMouseEvents(ignore, options);
+});
+
+ipcMain.on('close-app', () => {
+    app.quit();
+});
+
+ipcMain.on('save-screenshot', async (event, rect) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    win.hide(); // Hide before capturing
+
+    setTimeout(async () => {
+        try {
+            const primaryDisplay = screen.getPrimaryDisplay();
+
+            const sources = await desktopCapturer.getSources({
+                types: ['screen'],
+                thumbnailSize: {
+                    width: primaryDisplay.size.width * primaryDisplay.scaleFactor,
+                    height: primaryDisplay.size.height * primaryDisplay.scaleFactor
+                }
+            });
+
+            const img = sources[0].thumbnail;
+            const scale = primaryDisplay.scaleFactor;
+            const cropRect = {
+                x: Math.round(rect.x * scale),
+                y: Math.round(rect.y * scale),
+                width: Math.round(rect.width * scale),
+                height: Math.round(rect.height * scale)
+            };
+
+            const crop = img.crop(cropRect);
+            const pngBuffer = crop.toPNG();
+
+            const pad = (n) => n.toString().padStart(2, "0");
+            const now = new Date();
+            const timestamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+            const filename = `Screenshot_${timestamp}.png`;
+            const filePath = path.join(outputDir, filename);
+
+            fs.writeFile(filePath, pngBuffer, (err) => {
+                if (err) console.error('Failed to save:', err);
+
+                if (isWatch) {
+                    // Restore window if watch mode
+                    win.show();
+                    console.log(`Saved to ${filePath}. Continuing...`);
+                } else {
+                    console.log(`Saved to ${filePath}. Exiting.`);
+                    app.quit();
+                }
+            });
+
+        } catch (e) {
+            console.error(e);
+            app.quit();
+        }
+    }, 100);
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "easyscreen-shot",
+  "version": "1.0.0",
+  "description": "Cross-platform screenshot tool with Green Box UI",
+  "main": "main.js",
+  "bin": {
+    "easyshot": "bin/easyshot.js"
+  },
+  "scripts": {
+    "start": "electron .",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder"
+  },
+  "keywords": [
+    "screenshot",
+    "electron",
+    "screen-capture",
+    "mac",
+    "windows",
+    "linux"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JASON-QWeb/EasyScreenShot.git"
+  },
+  "author": "jasonqweb",
+  "license": "MIT",
+  "homepage": "https://github.com/JASON-QWeb/EasyScreenShot#readme",
+  "bugs": {
+    "url": "https://github.com/JASON-QWeb/EasyScreenShot/issues"
+  },
+  "devDependencies": {
+    "electron": "^39.2.7",
+    "electron-builder": "^24.0.0"
+  },
+  "dependencies": {
+    "commander": "^14.0.2"
+  }
+}

package/renderer.js

@@ -0,0 +1,139 @@
+const { ipcRenderer } = require('electron');
+
+const selectionBox = document.getElementById('selection-box');
+const widthInput = document.getElementById('width-input');
+const heightInput = document.getElementById('height-input');
+const closeBtn = document.getElementById('close-btn');
+const saveBtn = document.getElementById('save-btn');
+
+let isDragging = false;
+let isResizing = false;
+let resizeDir = '';
+let startX, startY;
+let initialRect = {};
+
+// Initialize Default Box
+function initBox() {
+    // Center a 600x400 box
+    const startW = 600;
+    const startH = 400;
+    const startL = (window.innerWidth - startW) / 2;
+    const startT = (window.innerHeight - startH) / 2;
+
+    updateSelection(startL, startT, startW, startH);
+    selectionBox.style.display = 'block';
+}
+
+// Mouse Event Forwarding Logic
+
+selectionBox.addEventListener('mouseenter', () => {
+    ipcRenderer.send('set-ignore-mouse-events', false);
+});
+
+selectionBox.addEventListener('mouseleave', () => {
+    // Only ignore if we are NOT dragging/resizing
+    if (!isDragging && !isResizing) {
+        ipcRenderer.send('set-ignore-mouse-events', true, { forward: true });
+    }
+});
+
+// Dragging Logic
+selectionBox.addEventListener('mousedown', (e) => {
+    if (e.target.classList.contains('handle')) {
+        isResizing = true;
+        resizeDir = e.target.dataset.dir;
+        startX = e.clientX;
+        startY = e.clientY;
+        initialRect = getRect();
+    } else if (e.target.closest('#toolbar')) {
+        // Toolbar interaction, naturally handled by buttons/inputs
+        // But we need to ensure we don't start dragging the box if clicking empty space in toolbar
+        e.stopPropagation();
+    } else {
+        // Dragging the box
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        initialRect = getRect();
+        document.body.style.cursor = 'move';
+    }
+});
+
+window.addEventListener('mousemove', (e) => {
+    if (isDragging) {
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        updateSelection(initialRect.left + dx, initialRect.top + dy, initialRect.width, initialRect.height);
+    } else if (isResizing) {
+        let { left, top, width, height } = initialRect;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        if (resizeDir.includes('e')) width += dx;
+        if (resizeDir.includes('w')) { left += dx; width -= dx; }
+        if (resizeDir.includes('s')) height += dy;
+        if (resizeDir.includes('n')) { top += dy; height -= dy; }
+
+        if (width > 0 && height > 0) {
+            updateSelection(left, top, width, height);
+        }
+    }
+});
+
+window.addEventListener('mouseup', () => {
+    isDragging = false;
+    isResizing = false;
+    document.body.style.cursor = 'default';
+});
+
+function updateSelection(left, top, w, h) {
+    selectionBox.style.left = left + 'px';
+    selectionBox.style.top = top + 'px';
+    selectionBox.style.width = w + 'px';
+    selectionBox.style.height = h + 'px';
+
+    widthInput.value = Math.round(w);
+    heightInput.value = Math.round(h);
+}
+
+function getRect() {
+    return {
+        left: parseInt(selectionBox.style.left || 0),
+        top: parseInt(selectionBox.style.top || 0),
+        width: parseInt(selectionBox.style.width || 0),
+        height: parseInt(selectionBox.style.height || 0)
+    };
+}
+
+// Toolbar Inputs
+widthInput.addEventListener('change', () => {
+    const w = parseInt(widthInput.value);
+    if (w > 0) selectionBox.style.width = w + 'px';
+});
+
+heightInput.addEventListener('change', () => {
+    const h = parseInt(heightInput.value);
+    if (h > 0) selectionBox.style.height = h + 'px';
+});
+
+// Buttons
+closeBtn.addEventListener('click', () => {
+    ipcRenderer.send('close-app');
+});
+
+saveBtn.addEventListener('click', () => {
+    const rect = getRect();
+    // rect uses CSS pixels (dom coords).
+    // main process will handle scaling.
+    // Pass x, y, width, height.
+    ipcRenderer.send('save-screenshot', {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+    });
+});
+
+// Run Init
+initBox();

package/styles.css

@@ -0,0 +1,154 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: transparent;
+    user-select: none;
+    font-family: sans-serif;
+}
+
+#selection-box {
+    position: absolute;
+    z-index: 3;
+    border: 2px solid #00ff00;
+    /* Green border */
+    /* Remove box-shadow dimming since we want full visibility */
+    display: none;
+    /* Hidden until init */
+    cursor: move;
+    background: transparent;
+    /* Ensure center is transparent */
+}
+
+/* Resize Handles */
+.handle {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #00ff00;
+    border-radius: 50%;
+    z-index: 4;
+}
+
+.handle.nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+}
+
+.handle.n {
+    top: -6px;
+    left: 50%;
+    margin-left: -5px;
+    cursor: n-resize;
+}
+
+.handle.ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+}
+
+.handle.e {
+    top: 50%;
+    right: -6px;
+    margin-top: -5px;
+    cursor: e-resize;
+}
+
+.handle.se {
+    bottom: -6px;
+    right: -6px;
+    cursor: se-resize;
+}
+
+.handle.s {
+    bottom: -6px;
+    left: 50%;
+    margin-left: -5px;
+    cursor: s-resize;
+}
+
+.handle.sw {
+    bottom: -6px;
+    left: -6px;
+    cursor: sw-resize;
+}
+
+.handle.w {
+    top: 50%;
+    left: -6px;
+    margin-top: -5px;
+    cursor: w-resize;
+}
+
+/* Toolbar */
+#toolbar {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    background-color: rgba(240, 240, 240, 0.9);
+    padding: 5px;
+    border-radius: 4px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    cursor: default;
+}
+
+.inputs {
+    display: flex;
+    gap: 5px;
+    font-size: 12px;
+    color: #333;
+}
+
+.inputs input {
+    width: 40px;
+    padding: 2px;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+}
+
+.actions {
+    display: flex;
+    gap: 5px;
+}
+
+.icon-btn {
+    background: white;
+    border: 1px solid #ddd;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #555;
+    padding: 0;
+}
+
+.icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.icon-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.icon-btn.cancel:hover {
+    background-color: #ffebee;
+    color: #d32f2f;
+    border-color: #ffcdd2;
+}
+
+.icon-btn.save:hover {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+    border-color: #c8e6c9;
+}