Open Source JavaScript Image Processing Software

Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It's often a compromise and sometimes it fails miserably. Smartcrop.js is the result of my experiments with content aware image cropping. It uses fairly simple image processing and a few rules to attempt to create better crops of images. This library is still in it's infancy but the early results look promising. So true to the open source mantra of release early, release often, I'm releasing version 0.0.0 of smartcrop.js. Smartcrop.js implements an algorithm to find good crops for images. It can be used in the browser, in node or via a CLI. Smarcrop requires support for Promises, use a polyfill for unsupported browsers or set smartcrop.Promise to your favorite promise implementation (I recommend bluebird).

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, AVIF and WebP images of varying dimensions. Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips. Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly. Lanczos resampling ensures quality is not sacrificed for speed. As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available. Most modern macOS, Windows and Linux systems running Node.js v10+ do not require any additional install or runtime dependencies. This module supports reading JPEG, PNG, WebP, AVIF, TIFF, GIF and SVG images. Output images can be in JPEG, PNG, WebP, AVIF and TIFF formats as well as uncompressed raw pixel data. Streams, Buffer objects and the filesystem can be used for input and output.

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly using CSS. What we're doing is adding filters to the images, as well as applying color and/or gradient overlays via various blending techniques to mimic filter effects. This means less manual image processing and more fun filter effects on the web! We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

An image processing library for Node written entirely in JavaScript, with zero native dependencies. If you're using this library with TypeScript the method of importing slightly differs from JavaScript. Instead of using require, you must import it with ES6 default import scheme. If you're using a web bundles (webpack, rollup, parcel) you can benefit from using the module build of jimp. Using the module build will allow your bundler to understand your code better and exclude things you aren't using. If you're using webpack you can set process.browser to true and your build of jimp will exclude certain parts, making it load faster. The static Jimp.read method takes the path to a file, URL, dimensions, a Jimp instance or a buffer and returns a Promise. In some cases, you need to pass additional parameters with an image's URL.

Panel Splitter is a script that helps you to instantly crop images/canvas along the guides in Photoshop and export them as high quality PDFs. All you need to provide is how many rows and columns that are needed. Panel Splitter will prepare the guides, crop each panel and save them as PDFs for you. There is an alternative option that already available in Adobe Photoshop named Slices from Guides. But, it lacks the ability to export each panel in high quality state & the Export feature is deprecated in modern versions. 🖥️ How to use Panel Splitter? - Download Panel Splitter for Adobe Photoshop - Double click on the downloaded setup file and install the software. - Start Panel Splitter and click Install, Panel Splitter will automatically identify installed Photoshop versions and configure. - If your Photoshop application is already opened, close and restart it. (First time only; to load the script to PS Read More at: https://github.com/Dilshan-H/Panel-Splitter

RhinOS is a framework to develop web sites using the latest features to provide a fastest access and administration to the web portal. The main features are: - Parametrized CMS and simple and efficient pseudo-code parser.

SuperEmbed.js detects embedded videos from YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more on webpages and makes them responsive. Essentially, this means they stretch to fill their container while still maintaining the content's original aspect ratio. I created SuperEmbed to fix all my issues with existing solutions, including (but not limited to) unnecessary reliance on other libraries, bloated code, and poor fallback support.

TurboSphere is an intuitive and easy to learn game engine. It is generally modeled after the Sphere RPG engine for its API, although the API has been modernized. It uses JavaScript as its game logic language, and supports many common file types for resources. TurboSphere uses Google V8 for JavaScript execution and SDL for graphics, audio, input and most other game related functions. It includes a map engine intended for top-down, zelda like games. Other, script based map engines are possible, and several have been implemented for TurboSphere's predecessor, Sphere (like the Majestic Map Engine (http://spheredev.org/smforums/index.php?topic=4496.0)). TurboSphere is largely compatible with the Sphere RPG engine, the main API change is the replacement of object creating functions with proper JavaScript constructors. This means that there are several completed games already made that work with TurboSphere, requiring only a small set of compatibility scripts to function in TurboSphere.

react-imgpro is an image-processing component for React. This component process an image with filters supplied as props and returns a base64 image. I was working on a project last month which involved a lot of image processing and I'd to rely on third party libraries. But before using them directly, I'd to learn different concepts in gl (shaders) and then try to implement them in React. The difficult part was not learning but it was the verbosity, boilerplate code and redundancy introduced by the libraries in the codebase. It was getting difficult to organize all the things. And React's component-based model was perfect for hiding all the implementation details in a component.

The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more, all that with a lightweight core (~7 KB) and intuitive interface. To get started, download the project. This project includes all of the tracking.js examples, source code dependencies you'll need to get started. Unzip the project somewhere on your local drive. The package includes an initial version of the project you'll be working with. While you're working, you'll need a basic HTTP server to serve your pages. Test out the web server by loading the finished version of the project. The main goal of tracking.js is to provide those complex techniques in a simple and intuitive way on the web. We believe computer vision is important to improve people's life, bringing it to the web will make this future a reality a lot faster.