JSPM

color-to-alpha

0.0.2
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 13
    • Score
      100M100P100Q43027F
    • License GPLv3

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

    Package Exports

    • color-to-alpha
    • color-to-alpha/process-image-data
    • color-to-alpha/string-to-rgb

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-to-alpha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    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