Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

creates a tinted copy of a given HTML image

License

NotificationsYou must be signed in to change notification settings

rozek/tinted-bitmap

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.

Installation

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>

Access

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.

Usage within Svelte

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="..."/>&nbsp; ➔ &nbsp;<imgstyle="vertical-align:middle"src={tintedImageURL}alt="tinted"/>

You will find this example in aSvelte REPL - feel free to play with it!

Usage as ECMAscript Module

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>

Usage as CommonJS or AMD Module (or as a global Variable)

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>

Example

An example is available on the Svelte REPL - feel free to play with it!

Background Information

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)

JavaScript API

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

Build Instructions

You may easily build this package yourself.

Just installNPM according to the instructions for your platform and follow these steps:

  1. either clone this repository usinggit ordownload a ZIP archive with its contents to your disk and unpack it there
  2. open a shell and navigate to the root directory of this repository
  3. runnpm install in order to install the complete build environment
  4. executenpm 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.

License

MIT License

About

creates a tinted copy of a given HTML image

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp