LIVE PREVIEWBUY FOR $19

Pixlux | HTML5 Client-Side Image Editing Library - 1

Pixlux – HTML5 Consumer-Aspect Picture Modifying Library

A whole, self-contained browser-based picture processing suite with 22 instruments. No server, no backend, no dependencies. All processing runs solely within the consumer’s browser utilizing the native Canvas 2D API.

Key Info

  • 22 picture processing instruments in a single bundle
  • Zero server required — static HTML, CSS, and JavaScript solely
  • No PHP, no database, no backend of any variety
  • No construct instruments — no npm, no bundler, no configuration
  • Advert-ready — two pre-wired monetization slots in a single config file
  • Absolutely responsive — 4 CSS breakpoints, works on desktop, pill, and cell
  • Zero exterior JavaScript dependencies — vanilla JS all through
  • Privateness first — photos by no means go away the browser, nothing is uploaded or transmitted

Technical Necessities

  • Server: None required. Deploy to any static host (Netlify, Vercel, GitHub Pages, shared internet hosting, CDN) or open index.html immediately from the file system.
  • PHP: Not required. It is a pure HTML/CSS/JavaScript software.
  • Database: Not required.
  • JavaScript: Have to be enabled within the browser.
  • Canvas 2D API: Required — supported by all trendy browsers.
  • Web connection: Required just for Google Fonts to render of their supposed fashion. The app is totally purposeful with out it utilizing the system font fallback.

Browser Compatibility

  • Google Chrome 80 and above
  • Mozilla Firefox 78 and above
  • Apple Safari 13 and above
  • Microsoft Edge 80 and above

No browser plugins or extensions required. JavaScript have to be enabled.

Options

Core Processing Instruments

  • Format Converter — Convert photos between PNG, JPG, and WEBP with adjustable high quality management
  • Picture Compressor — Cut back file measurement as much as 90% with a reside high quality slider and real-time file measurement preview
  • Picture Resizer — Resize to actual pixel dimensions with optionally available side ratio lock
  • Picture Cropper — Freeform crop and stuck aspect-ratio crop modes
  • Rotator and Flipper — Rotate by any angle; flip horizontally or vertically

Enhancement and Modifying Instruments

  • Picture Filters — Brightness, distinction, saturation, sepia, hue rotation, and invert with reside preview
  • Blur Device — Gaussian blur with adjustable pixel radius through the Canvas filter API
  • Sharpen Device — Unsharp masks through a convolution kernel for edge element enhancement
  • Watermark Device — Textual content and picture watermarks with place, opacity, and tiling controls
  • Border and Radius — Add customized borders, rounded corners, and background fill colours
  • Shade Overlay — Apply stable or gradient overlays with 9 mix modes together with multiply, display, and overlay
  • Background Remover — Shade-key background elimination with an adjustable tolerance slider

Evaluation and Utility Instruments

  • Metadata Viewer — Show file properties, pixel dimensions, and EXIF knowledge
  • Shade Picker — Pixel-level colour extraction returning values in HEX, RGB, and HSL codecs
  • Palette Generator — Dominant colour extraction utilizing the median-cut algorithm
  • Format Preview — Aspect-by-side PNG, JPG, and WEBP high quality comparability with file measurement show
  • Picture to Base64 — Encode any picture to a Base64 knowledge URI for HTML or CSS embedding
  • Base64 to Picture — Decode a Base64 string again to a downloadable picture file
  • Picture Merge — Mix a number of photos horizontally, vertically, or in a grid format
  • Bulk Processor — Batch convert, compress, or resize a number of photos in a single operation
  • Screenshot Device — Clipboard picture paste and canvas test-image generator

Studio

  • Picture Designer — Full-featured canvas paint studio with layers, shapes, textual content instruments, fill instruments, undo/redo historical past as much as 40 steps, and export to PNG, JPG, or WEBP

Monetization and Advert Integration

Pixlux ships with two pre-wired advert slots. All advert code is contained in a single file — config/adverts.js — so patrons can activate monetization by modifying one location solely. No JavaScript information is required.

Advert Slots

  • Banner Advert (728×90 leaderboard) — Seems on the prime of each device web page and in three positions throughout the homepage
  • Sidebar Advert (300×250 medium rectangle) — Seems on the backside of the left navigation sidebar on each device web page. Additionally helps 160×600 large skyscraper format

Suitable Advert Networks

  • Google AdSense
  • Media.internet
  • Ezoic
  • Mediavine / Raptive
  • Any supplier that provides an ordinary script and tag snippet

Responsive Design

All pages adapt to the consumer’s display measurement by way of a CSS-only responsive system. No JavaScript is concerned in format adaptation.

  • 1100px and under — Sidebar collapses; single-column content material space prompts
  • 960px and under — Device grid switches to a two-column format; navigation simplifies
  • 760px and under — Full cell format; hamburger navigation menu prompts
  • 480px and under — Single-column device grid; compact card sizes; touch-friendly faucet targets

Fonts

Google Fonts are loaded through CDN — not bundled domestically. Every web page masses Bricolage Grotesque, DM Sans, and DM Mono from fonts.googleapis.com. An energetic web connection is required for the fonts to render of their supposed fashion. The toolkit falls again to the system sans-serif stack routinely when the CDN is unavailable. To make use of fonts offline, obtain the .woff2 recordsdata from Google Fonts, place them in property/fonts/, take away the CDN hyperlink tags, and add @font-face declarations to property/css/fashion.css.

Customization

All shared elements — header, footer, sidebar, and advert slots — are outlined within the config/ listing. Edit one file and the change propagates to each web page routinely.

  • config/header.js — Model title, emblem, navigation hyperlinks, and call-to-action button
  • config/footer.js — Full web site footer
  • config/tool-page-footer.js — Compact footer bar on each device web page
  • config/adverts.js — Each advert slot variables with seen placeholders — the one file wanted to activate adverts

All colours, typography, and spacing are CSS customized properties in property/css/fashion.css underneath :root. Replace a token as soon as and each web page displays the change.

Getting Began

  1. Extract the ZIP archive to your net root or any native listing
  2. Open index.html in any trendy browser — all 22 instruments are instantly purposeful
  3. To activate adverts, open config/adverts.js and change the placeholder blocks along with your advert community code
  4. To rebrand, edit config/header.js and config/footer.js along with your model title and hyperlinks

Contact & Help

For technical questions, pre-sale inquiries, or customized improvement: [email protected]


Source