translucify
translucify copied to clipboard
Published
20 hours ago •
jsyang
jsyang
Makes an image's background 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
jsyang