Client Side Image Processing Library – imazing

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()
})