Makes an image's background transparent. Replaces <img> with <canvas>.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
GruntTasks.json
Gruntfile.js
LICENSE
README.md
index.html
item.png
package.json
translucify.js

README.md

Translucify

Makes an image's background pixels transparent. Replaces img with canvas.

Installation and Usage

npm install --save translucify

translucify(selectorResult, tolerance)

Use the flood-fill method for making the background transparent.

selectorResult
Type Example
jQuery object $('img:last-child')
NodeList document.querySelectorAll('img')
HTMLImageElement document.querySelector('img#product')

tolerance is a value from 0 to 1 that determines which pixels are part of same group of pixels to be flooded with transparency. Default value: 0.05

Example: drop-in usage

<html>
    <head>
        <script src="//path/to/libs/translucify.js"></script>
        ...
    </head>
    <body>
        ...
        <img src="cheese1.jpg"/>
        ...
    </body>
</html>
window.translucify($('img'));

Example: Browserify usage

var translucify = require('translucify');

...

translucify(document.querySelectorAll('img'));

Creating the reference image for testing

npm start

Running the test

npm install
grunt