Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including translucify with all npm packages installed. Try it out:

var translucify = require("translucify")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

translucify v0.1.5

Makes uniform color image backgrounds transparent. Replaces <img> with <canvas>.

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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free