- Notifications
You must be signed in to change notification settings - Fork0
creates a tinted copy of a given HTML image
License
rozek/tinted-bitmap
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
creates a tinted copy of a given HTML Image
NPM users: please consider theGithub README for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)
Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.
tinted-bitmap
may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.
You may either install the package into your build environment usingNPM with the command
npm install tinted-bitmap
or load the plain script file directly (Browsers automatically get the bundled version, thus, the module's dependencyjavascript-interface-library does not have to be loaded separately)
<scriptsrc="https://unpkg.com/tinted-bitmap"></script>
How to access the package depends on the type of module you prefer
- ESM (or Svelte):
import { tintedBitmap, tintedBitmapAsURL } from 'tinted-bitmap'
- CommonJS:
const tintedBitmap = require('tinted-bitmap')
- AMD:
require(['tinted-bitmap'], (tintedBitmap) => {...})
Alternatively, you may access the global variabletintedBitmap
directly.
Note for ECMAScript module users: all module functions and values are exported individually, thus allowing your bundler to perform some "tree-shaking" in order to include actually used functions or values (together with their dependencies) only.
For Svelte it is recommended to import the package within a module context:
<scriptcontext="module">import{tintedBitmapAsURL}from'tinted-bitmap'</script><script>letoriginalImage,tintedImageURLfunctiontintOriginalImage(){tintedImageURL=tintedBitmapAsURL(originalImage,'limegreen')} $:if(originalImage!=null){if(originalImage.complete){tintOriginalImage()}else{originalImage.addEventListener('load',tintOriginalImage)}}</script><imgbind:this={originalImage}style="vertical-align:middle"alt="original"src="..."/> ➔ <imgstyle="vertical-align:middle"src={tintedImageURL}alt="tinted"/>
You will find this example in aSvelte REPL - feel free to play with it!
If you prefer ESMs, you will presumably also use a bundler (such asrollup orwebpack) to resolve any transitive dependencies and perform some "tree-shaking" to eliminate unnecessary parts (tinted-bitmap
is fully tree-shakable). In this case, just import what you need and use it - your bundler will do the rest:
<script>import{tintedBitmapAsURL}from'tinted-bitmap'window.onload=function(){letoriginalImage=document.getElementById('originalImage')lettintedImage=document.getElementById('tintedImage')tintedImage.src=tintedBitmapAsURL(originalImage,'limegreen')}</script><body><imgid="originalImage"style="vertical-align:middle"src="..."/><imgid="tintedImage"style="vertical-align:middle"/></body>
Let's assume that you already "required" or "imported" (or simply loaded) the module according to your local environment. In that case, you may use it as follows:
<script>const{ tintedBitmapAsURL}=tintedBitmapwindow.onload=function(){letoriginalImage=document.getElementById('originalImage')lettintedImage=document.getElementById('tintedImage')tintedImage.src=tintedBitmapAsURL(originalImage,'limegreen')}</script><body><imgid="originalImage"style="vertical-align:middle"src="..."/><imgid="tintedImage"style="vertical-align:middle"/></body>
An example is available on the Svelte REPL - feel free to play with it!
Sometimes it is necessary to draw a given (often b/w) raster image in a different color.tinted-bitmap
performs the necessary "tinting" of such a bitmap and may construct either the data URL for the result (which is often preferred as it may be directly assigned to thesrc
attribute of a given HTML image element) or the result itself (as an instance ofHTMLImageElement
)
This package offers the following named JavaScript exports (function signatures are given with TypeScript type annotations, JavaScript programmers may just ignore them):
tintedBitmap (Bitmap:HTMLImageElement, TintColor:string):HTMLImageElement
tintedBitmap
takes a given HTML image element "Bitmap
" (which must becomplete
, i.e. fully loaded), uses its alpha channel to create another image in the givenTintColor
(which must be a valid CSS color specification) and returns that image as anHTMLImageElement
tintedBitmapAsURL (Bitmap:HTMLImageElement, TintColor:string):string
tintedBitmapAsURL
takes a given HTML image element "Bitmap
" (which must becomplete
, i.e. fully loaded) and uses its alpha channel to create another image in the givenTintColor
(which must be a valid CSS color specification). The contents of that bitmap are returned as a data URL
You may easily build this package yourself.
Just installNPM according to the instructions for your platform and follow these steps:
- either clone this repository usinggit ordownload a ZIP archive with its contents to your disk and unpack it there
- open a shell and navigate to the root directory of this repository
- run
npm install
in order to install the complete build environment - execute
npm run build
to create a new build
You may also look into the author'sbuild-configuration-study for a general description of his build environment.