Take a screenshot online and compresses images in browser with Webassembly
See the codePhoto 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.
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:
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.
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:
src/content.config.ts, which keeps article metadata consistent.public/blog/ and referenced with /blog/image-name.webp.src/lib/siteIdentity.js.src/lib/homepageCopy.js.src/components/PrivacyPolicyPage.astro and canonicalize to /privacy-policy/.updatedDate only when an article actually changes.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.
// request secret key
PUBLIC_SECRET_KEY=
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 |
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.@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.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.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.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.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.Vercel: used for deploying website
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.Feel free to check our documentation or jump into our Discord server.
Take a screenshot online and compresses images in browser with Webassembly
See the codePhoto 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.
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:
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.
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:
src/content.config.ts, which keeps article metadata consistent.public/blog/ and referenced with /blog/image-name.webp.src/lib/siteIdentity.js.src/lib/homepageCopy.js.src/components/PrivacyPolicyPage.astro and canonicalize to /privacy-policy/.updatedDate only when an article actually changes.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.
// request secret key
PUBLIC_SECRET_KEY=
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 |
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.@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.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.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.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.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.Vercel: used for deploying website
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.Feel free to check our documentation or jump into our Discord server.