tessl/npm-gatsby-plugin-sharp

Wrapper of the Sharp image manipulation library for Gatsby plugins

58%

Overall

Evaluation — 58%

↑ 1.07x

Agent success when using this tile

Overview

Eval results

Files

Image Cropping Utilities

Name: tessl/npm-gatsby-plugin-sharp
Author: tessl

A utility module that processes images using different intelligent cropping and fitting strategies to optimize image presentation for various contexts.

Capabilities

Smart attention-based cropping

Given an image file path "test-images/portrait.jpg", width 400, and height 400, returns processed image data with smart attention-based cropping applied @test
Given an image file path "test-images/landscape.jpg", width 600, and height 400, returns processed image data with attention detection applied @test

Entropy-focused cropping

Given an image file path "test-images/nature.jpg", width 500, and height 500, returns processed image data with entropy-based region selection @test

Directional cropping

Given an image file path "test-images/group.jpg", width 400, height 300, and center direction, returns image cropped to the center region @test
Given an image file path "test-images/skyline.jpg", width 800, height 400, and north direction, returns image cropped to the top region @test

Fit strategies

Given an image file path "test-images/logo.jpg", width 300, height 300, and cover fit, returns image that fills dimensions by cropping @test
Given an image file path "test-images/banner.jpg", width 400, height 200, and contain fit, returns image that fits within dimensions without cropping @test

Implementation

@generates

API

/**
 * Crops an image using attention-based focus detection
 *
 * @param {string} imagePath - Path to the source image file
 * @param {number} width - Target width in pixels
 * @param {number} height - Target height in pixels
 * @returns {Promise<Object>} Object containing image buffer and metadata
 */
async function cropWithAttention(imagePath, width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Crops an image using entropy-based region selection
 *
 * @param {string} imagePath - Path to the source image file
 * @param {number} width - Target width in pixels
 * @param {number} height - Target height in pixels
 * @returns {Promise<Object>} Object containing image buffer and metadata
 */
async function cropWithEntropy(imagePath, width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Crops an image with directional focus
 *
 * @param {string} imagePath - Path to the source image file
 * @param {number} width - Target width in pixels
 * @param {number} height - Target height in pixels
 * @param {string} direction - Direction: 'center', 'north', 'south', 'east', 'west', 'northeast', 'northwest', 'southeast', 'southwest'
 * @returns {Promise<Object>} Object containing image buffer and metadata
 */
async function cropDirectional(imagePath, width, height, direction) {
  // IMPLEMENTATION HERE
}

/**
 * Resizes an image using a specific fit strategy
 *
 * @param {string} imagePath - Path to the source image file
 * @param {number} width - Target width in pixels
 * @param {number} height - Target height in pixels
 * @param {string} strategy - Fit strategy: 'cover' or 'contain'
 * @returns {Promise<Object>} Object containing image buffer and metadata
 */
async function resizeWithFit(imagePath, width, height, strategy) {
  // IMPLEMENTATION HERE
}

module.exports = {
  cropWithAttention,
  cropWithEntropy,
  cropDirectional,
  resizeWithFit
};

Dependencies { .dependencies }

gatsby-plugin-sharp { .dependency }

Provides image processing and intelligent cropping capabilities

tessl i tessl/npm-gatsby-plugin-sharp@5.15.0