color-to-alpha

Creates an alpha channel for a specific color while preserving anti-aliasing

Usage no npm install needed!

<script type="module">
  import colorToAlpha from 'https://cdn.skypack.dev/color-to-alpha';
</script>

README

color-to-alpha

A function which turns a given color for the given pixel transparent while attempting to preserve anti-aliasing.

Live demo

Adapted from GIMP's color-to-alpha plugin by Seth Burgess, licenced under GPLv3:

(...) It will attempt to preserve anti-aliasing information by using a partially intelligent routine that replaces weak color information with weak alpha information. In this way, areas that contain an element of the selected color will maintain a blended appearance with their surrounding pixels.

Source: http://docs.gimp.org/en/plug-in-colortoalpha.html

Usage

This module exports solely the actual color_to_alpha function:

  var col = cta([128, 128, 128, 1], [128, 128, 128]);
  // col equals [0,0,0,0]

Please refer to the spec/ folder as well as the example folder for more usage examples.

Helper functions

processImageData(srcImageData, dstImageData, color)

This function removes the given color (a RGB array) from srcImageData and stores the result in dstImageData.

  var processImageData = require('color-to-alpha/process-image-data');
  var color = stringToRGB('14aaeb');

  var imageData = context.getImageData(0,0,img.width, img.height);
  var dstData = context.createImageData(imageData);

  processImage(imageData, dstData, color);

  context.putImageData(dstData, 0, 0);

stringToRGB(string)

Returns a RGB array for the given hexdecimal color code ('#00000-#ffffff').

  var stringToRGB = require('color-to-alpha/string-to-rgb');
  var color = stringToRGB('14aaeb');
  // color === [ 20, 170, 235 ]

rgbToString(string)

Returns an hexdecimal color string for the given RGB(a) array.

  var rgbToString = require('color-to-alpha/rgb-to-string');
  var color = rgbToString([ 20, 170, 235 ]);
  // color === '#14aaeb'

Demonstration

In order to try this module out interactively, you will need to build the examples. Make sure to install the module's depencencies, have the Gulp build system installed.

Then run the following commands to build the example and run the tiny test suite:

npm install
gulp

Developing

If you want to adjust something, you can start the "watch" task in order to run the unit tests as well as build the example at every file change.

Credits

  • Seth Burgess wrote the original plugin for the GNU Image Manipulation Program
  • clahey

License

GPLv3