npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aptoma/aoi-smart-crop

v1.0.2

Published

Helper library for doing smart crops of images based on area of interest data

Downloads

188

Readme

Area of Interest Smart Cropper

Create smart crops from area of interest data.

This lib is designed to be used with images served by Aptoma's Smooth Storage service, but the crop calculations should be applicable in other contexts.

By provding image data with area of interest and an optional focus point, you can generate data for different crops that you can use to resize images.

The lib also provides a few helper functions to see how the crop relates to the original image, to allow further modifying the crop.

Usage:

'use strict';

const smartCrop = require('@aptoma/aoi-smart-crop');

// Smooth Storage transform token, for signing image requests
const transformToken = '...';

// The raw data of the image
const imageData = {
    url: 'https://...',
    width: 1200,
    height: 800,
    aoi: {
        x: 200,
        y: 100,
        width: 500,
        height: 300,
        // Focus can be omitted, in which case the center of the area of interest will be used instead
        focus: {
            x: 400,
            y: 200
        },
        // Origin is not used by the crop function, by you may use this do decide which mode to use
        origin: 'auto|manual'
    }
};

const size = {
	width: 300,
	height: 300
};

const mode = smartCrop.modes.FOCUS_POINT;
// const mode = smartCrop.modes.TIGHT_AREA_OF_INTEREST;
// const mode = smartCrop.modes.TIGHT_AREA_OF_INTEREST_FOCUS_POINT;
// const mode = smartCrop.modes.SAFE;

// Get the crop coordinates matching your desired crop format and area of interesst
const cropData = smartCrop.getCrop(size, imageData, mode);

// Get the url of the resized smart cropped image
// NOTE: When using mode SAFE, the target size might be modified to include the entire area of interest
const imageUrl = smartCrop.getResizedImageUrl(imageData.url, cropData.size, {crop: cropData.crop}, transformToken);

Modes

The smart cropper support different modes:

FOCUS_POINT

FOUCS_POINT will create a large crop centered around either the provided focus point or the center of the area of interest.

Depending on whether your requested format is wider or narrower than the area of interest, this will include either the full width or height of the original image.

This mode will produce the most universally usable crop, as long as the original composition of the image is good.

TIGHT_AREA_OF_INTEREST

TIGHT_AREA_OF_INTEREST will create a crop where the outer edges are confined by the area of interest. Again, whether width or height is prioritized depends on the requested format vs the area of interest format.

After cutting around the edges, the crop will center around the middle of the area of interest. This mode might end up cutting out parts of the area of interest, if the area of intereset has a significantly different shape.

This mode can be used when you need to zoom in on the essential parts of the image, eg. when used for thumbnails or otherwise space constrained areas. If you have a focus point for your image, TIGHT_AREA_OF_INTEREST_FOCUS_POINT can be a safer choice when the format is tight as well.

TIGHT_AREA_OF_INTEREST_FOCUS_POINT

TIGHT_AREA_OF_INTEREST_FOCUS_POINT is similar to TIGHT_AREA_OF_INTEREST, but centering after edge cutting will be on the specified focus point. This risks leaving out large parts of the area of interest in place of content outside of the area of interest, but the benefit is that the focus point will always be included. This can prevent faces from being cut, when faces are located near an edge, and the requested format is too different from the area of interest.

SAFE

SAFE behaves similar to FOCUS_POINT, but after making the initial crop around the focus point, the crop will be moved to also include the entire area of interest. If necessary for preserving the entire area of interest, the final height may be adjusted to no longer conform to ther requested format.

This mode should be used when it's more important that the entire area of interest is included, than getting the exact crop format.

Utility functions

Smart Crop also provides utility functions to get some data about the crop.

smartCrop.getCuttableArea(areaOfInterest, crop) will return an object containing how much more can be cut from each side without removing any of the area of interest. The values can be negative, which indicates that some parts have been cut.

smartCrop.getCutArea({width: originalWidth, height: originalHeight}, crop) will return how much has been cut from each edge of the original image.

This data can be used to adjust the crop depending on the context, like making one of two images a bit taller to line up properly.