Skip to content

Repository files navigation

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.

Deploy with Vercel

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.

About

Take a screenshot online and compresses images in browser with Webassembly

Topics

Resources

Stars

1.2k stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages