Author: | kukuhsul |
---|---|
Views Total: | 217 views |
Official Page: | Go to website |
Last Update: | September 11, 2018 |
License: | MIT |
Preview:

Description:
imazing is a multifunctional JavaScript library for client-side image processing that features Histogram, Grayscale, Inverse Color, Brightness, Flip, Crop and more.
How to use it:
Create a canvas element to place your image.
<canvas id="canvas"></canvas>
Create controls to process your image.
<div class="btn-group"> <canvas id="histogramCanvas"></canvas> </div> <div class="btn-group"> <p class="head">Utilities</p> <input type="file" id="load"> <label for="load" class="btn">Load Image</label> <button id="reset" class="btn">Reset</button> <button type="button" id="coba" class="btn">Coba</button> </div> <div class="btn-group"> <p class="head">Histogram</p> <button type="button" id="histogram" class="btn effect">Show Histogram</button> </div> <div class="btn-group"> <p class="head">Grayscale</p> <button type="button" id="grayscale" class="btn effect">Grayscale</button> </div> <div class="btn-group"> <p class="head">Invers</p> <button type="button" id="inverse" class="btn effect">Inverse</button> </div> <div class="btn-group"> <div class="flex"> <p class="head">Brightness: add/subtract</p> <button type="button" i-bright="10" id="brightenSumUp" class="btn">+</button> <button type="button" i-bright="-10" id="brightenSumDown" class="btn">-</button> </div> <div class="flex"> <p class="head">Brightness: multiplicate/divide</p> <button type="button" i-bright="2" id="brightenMultUp" class="btn">+</button> <button type="button" i-bright="0.5" id="brightenMultDown" class="btn">-</button> </div> </div> <div class="btn-group"> <p class="head">Flip</p> <button type="button" id="flipH" class="btn effect">Flip Horizontal</button> <button type="button" id="flipV" class="btn effect">Flip Vertical</button> </div> <div class="btn-group"> <p class="head">Crop</p> <div class="flex"> <input type="number" id="cropX" placeholder="Start X" value=""> <input type="number" id="cropY" placeholder="Start Y" value=""> <input type="number" id="cropWidth" placeholder="Width" value=""> <input type="number" id="cropHeight" placeholder="Height" value=""> </div> <button type="button" id="crop" class="btn effect">Crop</button> </div> <div class="btn-group flex"> <p class="head">Rotate</p> <button type="button" id="rotate90" class="btn effect">90 deg</button> <button type="button" id="rotate180" class="btn effect">180 deg</button> <button type="button" id="rotate270" class="btn effect">270 deg</button> </div> <div class="btn-group"> <p class="head">Scale</p> <button type="button" id="scaleUp" class="btn effect">Zoom In</button> <button type="button" id="scaleDown" class="btn effect">Zoom Out</button> </div> <div class="btn-group flex"> <p class="head">Noise Reduction</p> <select id="noiseReductionType"> <option value="mean">Mean Filter</option> <option value="median">Median Filter</option> <option value="modus">Modus Filter</option> </select> <button type="button" id="noiseReduction" class="btn">Filter</button> </div> <div class="btn-group flex"> <p class="head">Image Convolution (Filter)</p> <select id="convolutionType"> <option value="blur">Blur</option> <option value="sharp">Sharpen</option> <option value="sobel">Edge Detection (Sobel)</option> </select> <button type="button" id="convolution" class="btn">Filter</button> </div> <div class="btn-group"> <p class="head">Dilation</p> <button type="button" id="dilationGrayscale" class="btn effect">Grayscale Dilation</button> <button type="button" id="dilationBinary" class="btn effect">Binary Dilation</button> </div> <div class="btn-group"> <p class="head">Erotion</p> <button type="button" id="erotionGrayscale" class="btn effect">Grayscale Erotion</button> <button type="button" id="erotionBinary" class="btn effect">Binary Erotion</button> </div>
Download and import the minified version of the imazing.js into the html.
<script src="js/imazing.min.js"></script>
The example JavaScript.
// console.log(Imazing()) var input, canvas, context; input = document.getElementById('load') canvas = document.getElementById('canvas') histogramCanvas = document.getElementById('histogramCanvas') // Initializing Imazing Imazing.create(canvas, input, histogramCanvas) // Load document.getElementById('load').addEventListener('change', Imazing.load) // Histogram document.getElementById('histogram').addEventListener('click', Imazing.histogram) // Reset document.getElementById('reset').addEventListener('click', Imazing.reset) // Coba document.getElementById('coba').addEventListener('click', function () { Imazing.coba() }) // document.getElementById('coba2').addEventListener('click', Imazing.print) // Brighteness document.getElementById('brightenSumUp').addEventListener('click', function () { Imazing.brighten("sum", parseInt(this.getAttribute('i-bright')) || 0); }) document.getElementById('brightenSumDown').addEventListener('click', function () { Imazing.brighten("sum", parseInt(this.getAttribute('i-bright')) || 0); }) document.getElementById('brightenMultUp').addEventListener('click', function () { Imazing.brighten("mult", parseFloat(this.getAttribute('i-bright')) || 0); }) document.getElementById('brightenMultDown').addEventListener('click', function () { Imazing.brighten("mult", parseFloat(this.getAttribute('i-bright')) || 0); }) // Grayscale document.getElementById('grayscale').addEventListener('click', Imazing.grayscale) // Inverse document.getElementById('inverse').addEventListener('click', Imazing.inverse) // Flip document.getElementById('flipH').addEventListener('click', function () { Imazing.flip() }) document.getElementById('flipV').addEventListener('click', function () { Imazing.flip('v') }) // Crop document.getElementById('crop').addEventListener('click', function() { var startX = parseInt(document.getElementById('cropX').value), startY = parseInt(document.getElementById('cropY').value), width = parseInt(document.getElementById('cropWidth').value), height = parseInt(document.getElementById('cropHeight').value) Imazing.crop(startX, startY, width, height) }) // Rotate document.getElementById('rotate90').addEventListener('click', function() { Imazing.rotate(90) }) document.getElementById('rotate180').addEventListener('click', function() { Imazing.rotate(180) }) document.getElementById('rotate270').addEventListener('click', function() { Imazing.rotate(270) }) // Scale document.getElementById('scaleUp').addEventListener('click', function() { Imazing.scaleUp(2) }) document.getElementById('scaleDown').addEventListener('click', function() { Imazing.scaleDown() }) // Noise Reduction document.getElementById('noiseReduction').addEventListener('click', function() { var type = document.getElementById('noiseReductionType').value Imazing.noiseReduction(type) }) // Image Convolution (Filter) document.getElementById('convolution').addEventListener('click', function() { var type = document.getElementById('convolutionType').value if (type == 'blur') { Imazing.filterBlur() } else if (type == 'sharp') { Imazing.filterSharp() } else if (type == 'sobel') { Imazing.filterSobel() } }) // Dilation document.getElementById('dilationGrayscale').addEventListener('click', function() { Imazing.dilationGrayscale() }) document.getElementById('dilationBinary').addEventListener('click', function() { Imazing.dilationBinary() }) // Erotion document.getElementById('erotionGrayscale').addEventListener('click', function() { Imazing.erotionGrayscale() }) document.getElementById('erotionBinary').addEventListener('click', function() { Imazing.erotionBinary() })