shot-easy-website

ShotEasy - take a screenshot online

Photo edit online for free, resize and filter photos, convert image formats, merge images or PDF pages into a long image, convert video to GIF, open documents, recognize text with browser-based OCR, create searchable PDFs, and easily screenshot an area or full page.

🏆 Chrome Extension

🏞️ Image Editor

😱 Screenshot Beautifier

🚴 Photo to Rounded

🎉 Background Remover

😬 Image Compressor

🧩 Long Image Composer

🎬 Video Convert

📄 Office & PDF Viewer

🔎 OCR & Editable PDF

OCR & searchable PDF

The OCR tool uses @paddleocr/paddleocr-js and PP-OCRv5 to recognize text from one image or scanned PDF directly in the browser.

Key capabilities:

• Supports JPG, PNG, WebP, BMP, and scanned PDF input.
• Starts OCR automatically after a file is selected.
• Displays detected text regions and recognition confidence scores.
• Allows line-by-line correction and full-text editing before export.
• Reconstructs visible OCR text at the detected positions in a selectable, searchable PDF without embedding the source image.
• Keeps document images, rendered PDF pages, and recognized text in browser memory without uploading the selected file to an OCR server.
• Downloads the public OCR model and WebAssembly runtime on first use; browser caching can make later recognition faster.

The localized OCR page and SEO copy are available for every language configured in src/lib/config.js. OCR page translations live in src/lib/ocrCopy.js, while the main interface is implemented in src/components/OcrTool.jsx.

Blog

The blog uses Astro Content Collections and local Markdown files instead of GitHub Issues.

Blog posts live in src/content/blog/*.md. Each article is a Markdown file with frontmatter for title, description, publish date, cover image, author, tags, and draft status.

Example:

---
title: "How Online Screenshot Tools Work"
description: "Understand how browser-based screenshot tools capture and export images."
date: 2026-07-01
cover: "/blog/how-to-take-a-screenshot-online.webp"
coverAlt: "Browser screenshot capture interface"
tags: ["screenshot", "browser tools"]
---

Write the article content here.

Benefits:

• Static blog pages are generated by Astro during build, so articles are fast and SEO-friendly.
• No GitHub access token is required for blog rendering.
• Article content is versioned with the website source code.
• Frontmatter is validated by src/content.config.ts, which keeps article metadata consistent.
• Cover images can be stored under public/blog/ and referenced with /blog/image-name.webp.

GEO and trust content

• Project identity and stable JSON-LD IDs are centralized in src/lib/siteIdentity.js.
• Homepage introductions and answers for every configured locale live in src/lib/homepageCopy.js.
• About and Contact are English public pages; do not advertise untranslated versions with hreflang.
• All privacy routes share src/components/PrivacyPolicyPage.astro and canonicalize to /privacy-policy/.
• Blog attribution links to the project About page. Set updatedDate only when an article actually changes.
• Trust-page dates are fixed content dates, not refreshed on every build. Update the date when the described content changes.
• Never add ratings, usage statistics, or processing guarantees without a verifiable source.

Run the offline checks with npm run test:geo. With the dev server running, use GEO_BASE_URL=http://127.0.0.1:4321 npm run test:geo to also check server-rendered HTML for all supported locales. After a production build, set GEO_CHECK_BUILD=1 to include sitemap and generated trust-page checks. Use Node 24 as specified in package.json, .nvmrc, and .node-version.

The privacy disclosure reflects source-configured services. The live GTM container, advertising consent settings, retention settings, and jurisdiction-specific obligations still require operator review; changing this page does not itself establish legal compliance.

Environment variables

// request secret key
PUBLIC_SECRET_KEY=

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:4321
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run astro ...	Run CLI commands like astro add, astro check
pnpm run astro -- --help	Get help using the Astro CLI

🚀 Deploy With Vercel

Node 24 runtime

• Use Node 24 locally: nvm install then nvm use. Install with pnpm 10.10.0 and pnpm install --frozen-lockfile.
• package.json pins engines.node to 24.x. Vercel uses this for the next deployment, overriding an older Project Settings version. You can also align Project Settings → Node.js Version to 24.x.
• Astro 5 and @astrojs/vercel 9 produce Node 24 serverless functions; Vercel Web Analytics uses the shared @vercel/analytics/astro component. Blog content uses the Astro content loader without changing existing article URLs.
• Verify using Node 24: pnpm build, pnpm test:geo, pnpm test:seo, and RUNTIME_CHECK_BUILD=1 pnpm test:runtime. The runtime check verifies every generated Node function declares nodejs24.x, all existing blog pages remain available, and production HTML includes the Analytics script.
• To include the live SSR blog-index check, set RUNTIME_BASE_URL=http://127.0.0.1:4321 while the dev server is running. Astro 5 also requires the updated TypeScript 5.9 configuration for a real source-file type check.
• Deploying is a separate action. After deployment, verify Node 24 in Vercel build/function logs; a local build does not verify the remote runtime.
• Astro's security.allowedDomains trusts the production hostname explicitly. Internal redirects and language-switch links use root-relative paths, never the proxy request origin; canonical/schema URLs use CONFIG.website. Keep origin protection enabled and do not replace the domain allowlist with a wildcard.
• Navigation regression checks: pnpm test:navigation; set NAVIGATION_BASE_URL to a running local server or deployment to include response-header, locale-navigation, and breadcrumb checks. These tests require exact root-relative redirect locations, including under simulated proxy headers, rather than checking only the destination pathname.
• Navigation links target canonical trailing-slash paths directly, avoiding unnecessary redirects and cached broken slashless redirects. After a redirect hotfix, verify the deployment in a private window; browsers may retain an old permanent redirect.
• Reference: Vercel Node 20 deprecation notice.

Vercel: used for deploying website

If you find anything wrong, give me an Issues

Give me the bugs

Update

• 2026-09-17: refine the existing Russian DOCX, Ukrainian PPTX, and French XLSX landing pages based on Search Console impressions; localize screenshot controls and fallback/error messages in Russian and Ukrainian. Existing tool URLs are unchanged.
• Search growth regression checks: npm run test:seo. To check server HTML, reciprocal screenshot language links, and priority landing content, use SEO_BASE_URL=http://127.0.0.1:4321 npm run test:seo; add SEO_CHECK_BUILD=1 after a production build to check sitemap entries. Search Console query-to-page attribution still requires a query-filtered report; sitemap presence does not prove indexing.
• 2026-08-11: add local PaddleOCR.js text recognition, editable OCR results, and searchable PDF export.
• 2024-11-26: add background remover use Hugging Face model: Xenova/modnet

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.