context-blender - Photoshop-style blend modes for HTML Canvas Contexts

  •        68

Adobe® Photoshop® has a variety of helpful blend modes for compositing images from multiple RGBA layers. This small library provides the same functionality for HTML Canvas Contexts, with the goal of producing the same results as Photoshop. This will also install node-canvas, which requires a working Cairo install. See https://github.com/Automattic/node-canvas#installation for more details.

https://github.com/Phrogz/context-blender

Dependencies:

canvas : ~1.4

Tags
Implementation
License
Platform

   




Related Projects

Chain - Dynamic color relations in Sketch.

  •    Javascript

When selecting a new chain, you can apply different transformations to the color property you're chaining (hue/saturation/brightness/alpha). Just specify a percentage to offset the property (i.e If you apply a transformation of -10 on the brightness you will get a color 10% darker. To update the Chains in your document, just modify your reference layer and select Update all Chains or use [shift cmd u].

Chain - Dynamic color relations in Sketch.

  •    Javascript

When selecting a new chain, you can apply different transformations to the color property you're chaining (hue/saturation/brightness/alpha). Just specify a percentage to offset the property (i.e If you apply a transformation of -10 on the brightness you will get a color 10% darker. To update the Chains in your document, just modify your reference layer and select Update all Chains or use [shift cmd u].

FlexiColorPicker - A pure JavaScript color picker - no images, external libraries, CSS or 1px divs.

  •    Javascript

FlexiColorPicker is based on HSV color model. The only two parts of the color picker are therefore the slider for selecting hue value and the picker for selecting saturation and value. Both the slider and picker are HTML elements (usually <div>'s) that serve as wrappers for SVG/VML gradient rectangles. The slider gradient rectangle represents the hue value (gradient with 9 stop-colors). The two overlapping black and white gradient rectangles of the picker represent the saturation and value values. The top level elements (<svg> in case of SVG enabled browser and <div> in case of VML enabled browser) that wrap each of the slider and picker gradient rectangles have set width and height to 100% which means that the color picker components (slider and picker) adjust themselfs automatically to the dimensions of the slider and picker HTML elements. This is the no-hassle form of creating the color picker. This is the recommended call.

glsl-blend - glsl photoshop blending modes. glslify formatted.

  •    GLSL

Photoshop blending modes in glsl for use with glslify. Blending modes include Screen, Multiply, Soft Light, Vivid Light, Overlay, etc. Implementations sourced from this article on Photoshop math. Blend modes can be imported individually using the standard glslify preprocessor syntax.

Codelobster - Free Portable IDE for PHP/HTML/CSS/JavaScript Development

  •    PHP

Codelobster PHP Edition streamlines and simplifies php development process. It provides HTML editor, HTML code inspector, CSS editor, JavaScript editor, PHP editor, PHP debugger and lot more.


geo_pattern - Create beautiful generative geometric background images from a string.

  •    Ruby

Generate beautiful tiling SVG patterns from a string. The string is converted into a SHA and a color and pattern are determined based on the values in the hash. The color is determined by shifting the hue and saturation from a default (or passed in) base color. One of 16 patterns is used (or you can specify one) and the sizing of the pattern elements is also determined by the hash values. You can use the generated pattern as the background-image for a container. Using the base64 representation of the pattern still results in SVG rendering, so it looks great on retina displays.

design-blocks - A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites

  •    HTML

Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.The project needs to be compiled, therefore the files in the src folder are those we'll be developing on. Don't make changes in the dist or demo folders as they will be overwritten when src is compiled.

KineticJS - KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications

  •    Javascript

##Mothballed I will no longer be maintaining this repo or the official KineticJS website because I have moved onto other ventures and projects. The latest version of KineticJS, 5.1.0, is very solid and can still be used in production applications. Please feel free to fork the repo if you'd like to make changes. Support of NodeJS is experimental.

jQuery-contextMenu - jQuery contextMenu plugin & polyfill

  •    HTML

$.contextMenu is a management facility for - you guessed it - context menus. It was designed for an application where there are hundreds of elements that may show a context menu - so intialization speed and memory usage are kept fairly small. It also allows to register context menus without providing actual markup, as $.contextMenu generates DOMElements as needed.have a look at the demos.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

Peek - Simple animated GIF screen recorder with an easy to use interface

  •    Vala

Peek makes it easy to create short screencasts of a screen area. It was built for the specific use case of recording screen areas, e.g. for easily showing UI features of your own apps or for showing a bug in bug reports. With Peek, you simply place the Peek window over the area you want to record and press "Record". Peek is optimized for generating animated GIFs, but you can also directly record to WebM or MP4 if you prefer.

Coloring-greyscale-images-in-Keras - Coloring B&W portraits with neural networks.

  •    Jupyter

Earlier this year, Amir Avni used neural networks to troll the subreddit /r/Colorization - a community where people colorize historical black and white images manually using Photoshop. They were astonished with Amir’s deep learning bot - what could take up to a month of manual labour could now be done in just a few seconds. I was fascinated by Amir’s neural network, so I reproduced it and documented the process. Read the article to understand the context of the code.

pickr - Flat, simple, responsive and hackable Color-Picker

  •    Javascript

Be sure to load the pickr.min.js after pickr.min.css. Moreover the script tag doesn't work with the defer attribute. As default color representation is hsva (hue, saturation, value and alpha) used, but you can also convert it to other formats as listed below.

PDM - PHP Dump Maker - Smart Backup Tool

  •    PHP

Smart PHP backup tool. Reads given SRC+subdirs, creates set of directories filled (or linked) with the content of SRC, made to fit given capacity. Features: multivol. backups, ISO creation, on-the fly CD/DVD burn, file splitting, index creating and more.

Indihiang - IIS and Apache log analyzing tool

  •    CSharp

Indihiang Project is a web log analyzing tool. This tool analyzes IIS and Apache Web logs and generates real time reports. It has Web Log Viewer and analyzer. It is capable to analyze the trend from the logs. This tool also integrate with windows Explorer so you can attach a log file in to indihiang tool via context menu.

CSSTint

  •    C++

CSSTint is an utility that allows you to easily change the appearance (i.e. color) of your website, by modifying the CSS file(s) using hue, saturation and lightness modifications (HSV and HSL supported). Parse your CSS file in, tint the colors and save.

iwanthue

  •    PHP

Colors for data scientists. Generate and refine palettes of optimally distinct colors. iWantHue allows you to generate palettes of colors. It is about mastering the properties of a palette by setting a range of Hue, Chroma (unbiased saturation) and Lightness. You can generate palettes of any size or just get the generator for a javascript project. The algorithm optimizes the perceptive distance in the color subspace, ensuring an optimal readability.

Toast UI Image Editor - Full featured image editor using HTML5 Canvas

  •    Javascript

Toast UI Image Editor is a full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. It supports Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter, Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend and lot more.

freeciv-web - Freeciv-web is an Open Source strategy game implemented in HTML5 and WebGL, which can be played online against other players, or in single player mode against AI opponents

  •    Javascript

Freeciv-web is an open-source turn-based strategy game. It can be played in any HTML5 capable web-browser and features in-depth game-play and a wide variety of game modes and options. Your goal is to build cities, collect resources, organize your government, and build an army, with the ultimate goal of creating the best civilization. You can play online against other players (multiplayer) or play by yourself against the computer. There is both a HTML5 2D version with isometric graphics and a 3D WebGL version of Freeciv-web. Freeciv-web is free and open source software. The Freeciv C server is released under the GNU General Public License, while the Freeciv-web client is released under the GNU Affero General Public License. See License for the full license document.

mortar - A simple library that makes it easy to pair thin views with dedicated controllers, isolated from most of the vagaries of the Activity life cycle

  •    Java

Mortar provides a simplified, composable overlay for the Android lifecycle, to aid in the use of Views as the modular unit of Android applications. It leverages Context#getSystemService to act as an a la carte supplier of services like dependency injection, bundle persistence, and whatever else your app needs to provide itself.One of the most useful services Mortar can provide is its BundleService, which gives any View (or any object with access to the Activity context) safe access to the Activity lifecycle's persistence bundle. For fans of the Model View Presenter pattern, we provide a persisted Presenter class that builds on BundleService. Presenters are completely isolated from View concerns. They're particularly good at surviving configuration changes, weathering the storm as Android destroys your portrait Activity and Views and replaces them with landscape doppelgangers.