Need help with image-focus?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

third774
150 Stars 8 Forks MIT License 186 Commits 19 Opened issues

Description

A dependency free utility for cropping images based on a focus point ~2.13kB gzipped

Services available

!
?

Need anything else?

Contributors list

# 131,638
CSS
yarn
Markdow...
month-p...
176 commits

image-focus 📷

A dependency free utility for cropping images based on a focus point ~2.13kB gzipped

npm version npm downloads MIT

Demo

Demo

Check out the demo and then play with editing it

Docs

Docs generated by

typedoc

Usage

Focus
Coordinates range between
-1
and
1
for both
x
and
y
axes. The
FocusPicker
class will help enable users to select the focus point to be used with an image.

FocusedImage

There are two ways to supply the coordinates when initializing the

FocusedImage
class

Data Tags

import { FocusedImage } from "image-focus"

const img = document.querySelector('.focused-image') as HTMLImageElement const focusedImage = new FocusedImage(img)

Using
focus
Option

import { FocusedImage } from "image-focus"

const img = document.querySelector('.focused-image') as HTMLImageElement const focusedImage = new FocusedImage(img, { focus: { x: 0.34, y: -0.21 } })

FocusPicker

Provide an

onChange
callback that will receive a
Focus
object that has
x
and
y
properties for the newly selected coordinates. Optionally supply a
focus
to initialize with, or a
retina
src to use instead of the default white ring SVG.
import {FocusedImage, FocusPicker} from "image-focus"

const imgEl = document.getElementById("focused-image") as HTMLImageElement const focusedImage = new FocusedImage(imgEl)

const focusPickerEl = document.getElementById("focus-picker-img") as HTMLImageElement const focusPicker = new FocusPicker(focusPickerEl, { onChange: focus => focusedImage.setFocus(focus), focus: startingFocus, })

What's going on?

The

element is being set to
position: absolute;
and having its
top
and
left
properties adjusted based on some calculations using the image and parent containers' aspect ratios and dimensions. The
's parent container gets set to
position: relative;
and
overflow: hidden;
to create the effect. There are a few other inline styles that get applied, so if anything appears to be behaving unexpectedly, be sure to check that the inline styles on both the
and its parent aren't being overridden by CSS on your page (especially from rules using
!important
).

Additionally, because the

FocusedImage
is positioned absolutely so it can shift as needed, its container needs to manage its own height and width. If you aren't seeing an image appear at all, it is likely that the parent div's
height
is fully collapsed.

What if I'm not using npm and a build process?

That's okay! unpkg has you covered. Just add this script tag to your page and the

image-focus
module is exposed in the global namespace under
window.imageFocus
.

Then in some script that loads after the above script tag:

var imgEl = document.querySelector('img.focused-image');
var focusedImage = new imageFocus.FocusedImage(imgEl, {x: 0.25, y: -0.3});

Attributions

This project was largely inspired by and adapted from jquery-focuspoint by jonom and used typescript-library-starter to scaffold the build process.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.