Biblioteca de procesamiento de imágenes del lado cliente-imazing

Vista prévia

Descripción

imazing es una biblioteca de JavaScript multifuncional para el procesamiento de imágenes del lado del cliente que cuenta con histograma, escala de grises, color inverso, brillo, voltear, recortar y más.

Funcionamiento

Cree un elemento canvas para colocar la imagen.

<canvas id="canvas"></canvas>

Cree controles para procesar la imagen.

<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>

Descargue e importe la versión minimizada de imazing. js en el HTML.

<script src="js/imazing.min.js"></script>

El ejemplo de 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()
})