@danehansen/image-data-reader
Version:
ImageData interface
98 lines (92 loc) • 4.03 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ImageData interface</title>
<style>
body {
background-color: #fff;
color: #000;
font-family: Helvetica, Arial;
font-size: 12px;
padding: 50px;
}
body > div {
margin-top: 30px;
padding: 20px 0;
width: 600px;
}
body > div,
footer {
border-top: 1px solid #000;
}
footer {
padding-top: 20px;
}
</style>
</head>
<body>
<h1>ImageDataReader <img src="https://img.shields.io/bundlephobia/minzip/@danehansen/image-data-reader.svg" alt="npm bundle size (scoped)" /> <img src="https://img.shields.io/npm/dt/@danehansen/image-data-reader.svg" alt="npm" /></h1>
<p><strong>Class</strong> : public class <a href="https://github.com/danehansen/ImageDataReader">ImageDataReader</a><br />
<strong>Inheritance</strong> : <a href="https://github.com/danehansen/ImageDataReader">ImageDataReader</a> > Object</p>
<p>The ImageDataReader class provides an interface for dealing with ImageData.</p>
<h2>Installation</h2>
<p><code>npm install --save @danehansen/image-data-reader</code></p>
<h2>Usage</h2>
<p>As a module:</p>
<pre><code>import ImageDataReader from '@danehansen/image-data-reader';
var idr = new ImageDataReader(document.querySelector('img'));
</code></pre>
<p>In your browser:</p>
<pre><code><script src='danehansen-ImageDataReader.min.js'></script>
<script>
var ImageDataReader = window.danehansen.ImageDataReader.default;
var idr = new ImageDataReader(document.querySelector('img'));
</script>
</code></pre>
<h2>Constants</h2>
<ul>
<li><strong>WHITE_BRIGHTNESS</strong>:uint<br />
Representative of a fully white pixel (255x3).</li>
</ul>
<h2>Methods</h2>
<ul>
<li><strong>red</strong>(x:uint, y:uint):uint<br />
Returns the green value of a given pixel, between 0 and 255.</li>
<li><strong>green</strong>(x:uint, y:uint):uint<br />
Returns the green value of a given pixel, between 0 and 255.</li>
<li><strong>blue</strong>(x:uint, y:uint):uint<br />
Returns the blue value of a given pixel, between 0 and 255.</li>
<li><strong>opacity</strong>(x:uint, y:uint):uint<br />
Returns the opacity value of a given pixel, between 0 and 255.</li>
<li><strong>brightness</strong>(imageData:ImageData, width:uint, x:uint, y:uint):uint<br />
Returns the sum of the red, green, and blue values of a given pixel, between 0 and <code>WHITE_BRIGHTNESS</code>.</li>
</ul>
<h2>Public Properties</h2>
<ul>
<li><strong>data</strong>:ImageData
The current ImageData value of the instance.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>ImageDataReader</strong>(source:CanvasImageSource, sourceCrop:Rectangle = {x: 0, y: 0, width: source.width, height: source.height}, destWidth:uint = source.width, destHeight:uint = source.height):ImageDataReader<br />
Creates a new instance of ImageDataReader and sets its data property based on the current state of source.</li>
<li><strong>red</strong>(x:uint, y:uint):uint<br />
Returns the green value of a given pixel, between 0 and 255.</li>
<li><strong>green</strong>(x:uint, y:uint):uint<br />
Returns the green value of a given pixel, between 0 and 255.</li>
<li><strong>blue</strong>(x:uint, y:uint):uint<br />
Returns the blue value of a given pixel, between 0 and 255.</li>
<li><strong>opacity</strong>(x:uint, y:uint):uint<br />
Returns the opacity value of a given pixel, between 0 and 255.</li>
<li><strong>brightness</strong>(x:uint, y:uint):uint<br />
Returns the sum of the red, green, and blue values of a given pixel, between 0 and <code>WHITE_BRIGHTNESS</code>.</li>
<li><strong>update</strong>():null<br />
Updates the instance‘s ImageData in the case there was a change. Ex: each frame of a video.</li>
<li><strong>adjustContract</strong>(reset:boolean = false):null<br />
Sets the instance to normalize the brightness/contrast of the output on red, green, and blue methods based on the current ImageData value.</li>
</ul>
<script></script>
</body>
</html>