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

pixel-scale

v2.0.1

Published

Get the pixel scale of an image, or scale it up or down without quality loss. Useful for pixel art!

Downloads

1,364

Readme

pixel-scale

📐 Get the pixel scale of an image, or scale it up or down without quality loss. Useful for pixel art!

  • 👀 Zero loss of quality
  • 🤖 Auto-detects current scale by default
  • ⏫ Can scale by multiplier or to a specific scale
  • 0️⃣ Zero dependencies
  • 🖼️ Works directly on ImageData

Table of contents

Demo

https://pixel-scale.netlify.app

Installation

| npm | yarn | | ------------------------- | ----------------------- | | npm install pixel-scale | yarn add pixel-scale  |

Usage

scalePixels(imageData, to, options)

Up- or downscales an image to the specified scale, without losing quality or changing any colors.

Parameters:

  • imageData (ImageData instance) - The ImageData instance to scale.

  • to (number) - The desired scale of the new image.

  • options (object, optional)

    • from (number) - The current scale of the image. If no from value is provided, the scale is calculated with getPixelScale. Only provide a from value if you are sure of the current pixel scale and want to save time.
    • maxColorDiff (number, default: 0) - Passed along to getPixelScale if no from value is set, otherwise does nothing.

Return value:

A new, scaled ImageData-instance.

Examples:

import { scalePixels } from 'pixel-scale';

// detect an image's current scale, and rescale it to 1
const scale1ImageData = scalePixels(imageData, 1);

// increase an image's scale from 5 to 10
const scale10ImageData = scalePixels(imageData, 10, { from: 5 });

// detect an image's current scale, allowing a color diff of 10,
// and rescale it to 2
const scale2ImageData = scalePixels(imageData, 2, { maxColorDiff: 10 });

getPixelScale(imageData, options)

Get the current pixel scale of an image.

Parameters:

  • imageData (ImageData instance) - The ImageData instance to scale.

  • options (object, optional)

    • maxColorDiff (number, default: 0) - See scalePixels's maxColorDiff option.

Return value:

A number indicating the image's pixel scale.

Examples:

import { getPixelScale } from 'pixel-scale';

// get an image's pixel scale
const imageScale = getPixelScale(imageData);

// get an image's pixel scale, allowing a maximum difference of 10 when comparing
// color channels of individual pixels
const imageScale = getPixelScale(imageData, { maxColorDiff: 10 });

multiplyPixelScale(imageData, by, options)

Similar to scalePixels, but upscales the image by the specified multiplier instead of to a specific scale. Detects the current scale of the image if no options.from value is provided.

Parameters:

  • imageData (ImageData instance) - The ImageData instance to upscale.

  • by (number) - The amount to multiply the image's current scale by.

  • options (object, optional) - See scalePixels's options.

Return value:

A new, scaled ImageData-instance.

Examples:

import { multiplyPixelScale } from 'pixel-scale';

// detect an image's current scale, and double it's size
const doubledImageData = multiplyPixelScale(imageData, 2);

// take an image of scale 5, and multiply it by 10
const tenfoldImageData = multiplyPixelScale(imageData, 10, { from: 5 });

dividePixelScale(imageData, by, options)

Similar to scalePixels, but downscales the image by the specified amount of times instead of to a specific scale. Detects the current scale of the image if no options.from value is provided.

Parameters:

  • imageData (ImageData instance) - The ImageData instance to downscale.

  • by (number) - The amount to divide the image's current scale by.

  • options (object, optional) - See scalePixels's options.

Return value:

A new, scaled ImageData-instance.

Examples:

import { dividePixelScale } from 'pixel-scale';

// detect an image's current scale, and make it half as big
const doubledImageData = dividePixelScale(imageData, 2);

// take an image of scale 8 and divide it by 4
const tenfoldImageData = dividePixelScale(imageData, 4, { from: 8 });

About

ImageData

All functions operate on ImageData, which can be retrieved from a canvas in the browser or e.g. node-canvas or sharp on Node.

Pixel scale

The pixel scale referred to in this readme is the amount of times a pixel of e.g. a pixel art image has been multiplied to increase the image size. For example, this image has a pixel scale of 1, while this image has a pixel scale of 10.

How does it work?

To get the pixel scale of an image, pixel-scale first figures out the common divisors of the image's height and width. This is done using Euclid's algorithm for finding the greatest common divisor, and then counting down. A more performant method (e.g. prime factorization/Pollard rho) is not deemed necessary here, as image dimensions never go up to those sizes that big.

It then tests each common divisor, starting with the largest one, by chunking up the image equally sized pieces and verifying that they each chunk is in a solid color (scaled pixels). If a chunk contains a different color outside of the max allowed span (maxColorDiff), then it will go to the next divisor. If every chunk is a solid color, then the divisor is most likely the pixel scale of the image.