📸 ngx-focus-point: Angular Image Focus & Zoom, Perfected! 🎯

ngx-focus-point is the ultimate Angular package for keeping your images and videos looking flawless on any screen. With the power to define a focus point, zoom, and crop your images, ngx-focus-point ensures that your content always stays in the spotlight! 💥 No more off-center crops or awkward framing—this tool makes sure your focal point remains front and center, perfectly aligned for every view. 📏✨

✨ Key Features:

• Angular Focus Tool – Easily find and lock in the image's hot spot! 🔍
• Zoom & Crop – Get the perfect close-up with smooth zoom cropping! 🔍📐
• Image & Video Resizing – Supports various aspect ratios like a pro!
• Video Resizing Over Time – Seamlessly adjust video focus and size dynamically as the video plays! 🎥⏳
• New Video Timeline Tool – A powerful tool for defining focus points at specific times in your video.
• Video-Select Component – Interactively select and adjust video focus over time with ease.
• YouTube Ready – Future support for YouTube iframes! 🎬

💡 Why Choose ngx-focus-point?

Companies can save significant storage and operational costs by leveraging ngx-focus-point. Here's how:

• No More Multiple Media Versions: Instead of uploading multiple versions of the same image or video for different devices or aspect ratios, users can simply select the important parts of the media, and ngx-focus-point will dynamically crop and resize as needed.
• Perfect for Responsive Design: Create responsive images and videos that adjust beautifully on any device, from widescreen monitors to mobile phones.
• Focus Over Time: With the ngx-focus-point-video-select and ngx-focus-point-timeline tools, you can define multiple focus points over the duration of a video, ensuring the critical content remains in view at every moment.
• AI-Powered Efficiency: Reduce the need for manual cropping and editing with intelligent focus and cropping tools that make your media workflow seamless.

Examples:

• E-commerce: Ensure product images always highlight key details, regardless of the device or screen size.
• Streaming Platforms: Dynamically adjust video focus based on important scenes or elements over time.
• Social Media: Quickly adapt images and videos for various platforms without creating separate versions for each aspect ratio.
• Corporate Websites: Save storage space by uploading a single version of images or videos and using ngx-focus-point to handle resizing and cropping dynamically.

🔧 Focus Tool Video

Use the Focus Tool Video to easily find and define the perfect focus point for your images.

🔧 Focus Tool Images

Use the Focus Tool to easily find and define the perfect focus point for your images.

📖 Instructions

For setup and usage instructions, check out the full documentation here.

🌐 GitHub Repository

Find the source code and contribute to the project on GitHub here.

🚀 Installation

Install via npm

npm i @believablecreations/ngx-focus-point

Install via Yarn

yarn add @believablecreations/ngx-focus-point

🔍 Tags & Search Terms

responsive videos, responsive images, ai responsive videos, ai responsive images, ai crop, dynamic crop images, dynamic crop videos, responsive images on any device, ready for any aspect ratio, angular image focus, angular zoom, ngx-focus-point, video resizing over time, video timeline tool, video-select component, ngx-focus-point-video-timeline, ngx-focus-point-video-select, responsive design media tools, save storage costs with dynamic cropping, e-commerce image tools, social media video optimization

Worker Options (Performance & Multithreading)

ngx-focus-point uses a Web Worker to run its positioning math off the main thread when available. This improves responsiveness during rapid resizes, scroll, and animations by avoiding main-thread blocking.

• Input: [workerOptions]
• TypeScript type:

import { NgxFocusPointWorkerOptions } from '@believablecreations/ngx-focus-point';

type NgxFocusPointWorkerOptions = {
  timeoutMs?: number; // default 300
  allowInlineFallback?: boolean; // default true
};

Options

• timeoutMs (default 300)
  • Max time to wait for a worker response before computing locally for that frame. Increase on very slow devices if needed.
• allowInlineFallback (default true)
  • If the external worker cannot load or fails to respond to an initial ping, an inline (Blob) worker is created. Set to false in strict CSP environments that disallow Blob workers; local compute is used when a worker is unavailable.

Why it matters (multithreading)

• Offloading heavy calculations keeps the UI smooth and reduces layout jank.
• A resilient strategy guarantees correct transforms even if a worker is slow or blocked: startup “ping” + per-call timeout fallbacks.

Usage

<!-- Default: resilient and smooth -->
<ngx-focus-point
  [focusX]="0" [focusY]="0" [scale]="1"
  [workerOptions]="{ timeoutMs: 300, allowInlineFallback: true }">
  <img src="/assets/hero.jpg" alt="" />
</ngx-focus-point>

<!-- Strict CSP: disallow Blob workers, fall back to local compute -->
<ngx-focus-point
  [focusX]="0" [focusY]="0" [scale]="1"
  [workerOptions]="{ allowInlineFallback: false }">
  <img src="/assets/hero.jpg" alt="" />
</ngx-focus-point>

Notes

• Set [debug]="true" to print detailed sizing and transform logs while developing.
• If a worker is unavailable or blocked by CSP, the component automatically computes locally so functionality remains correct.

Advanced

• You can keep the options in a strongly-typed variable:

import { NgxFocusPointWorkerOptions } from '@believablecreations/ngx-focus-point';

workerOpts: NgxFocusPointWorkerOptions = {
  timeoutMs: 400,
  allowInlineFallback: true,
};

<ngx-focus-point [workerOptions]="workerOpts">
  <img src="/assets/hero.jpg" />
</ngx-focus-point>