No Description Available
Javascript image compressor
643 28 November 2019
Abhishek Singh
~ onex0
This Javascript image compressor built using browser image compressor Javascript library.
No Description Available
0
This Javascript image compressor built using browser image compressor Javascript library.
$('#file').change(function(event){
const {size,lastModifiedDate,name} = $(this)[0].files[0];
$('#size').text(size/1024/1024+'MB')
$('#lastModifiedDate').text(lastModifiedDate)
$('#name').text(name)
gen_img(event.target.files[0],'adp-img')
handleImageUpload(event)
})
async function handleImageUpload(event) {
const imageFile = event.target.files[0];
var options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true
}
try {
const compressedFile = await imageCompression(imageFile, options);
$('#asize').text(`${compressedFile.size / 1024 / 1024} MB`)
$('#alastModifiedDate').text(Date())
gen_img(compressedFile,'res-img')
} catch (error) {
console.log(error);
}
}
function gen_img(blob,loc){
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$('.'+loc).html('<img src="'+base64data+'">')
console.log(base64data);
}
}
<section class="mt-5">
<div class="container">
<div class="card">
<div class="card-body">
<div class="form-row">
<div class="col-md-6 cil-xs-12">
<form class="adp-form">
<div class="form-row align-items-center">
<label>Choose Image</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-images"></i></div>
</div>
<input type="file" class="btn btn-light btn-sm form-control" id="file" placeholder="Jane Doe" accept="image/*">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-6 cil-xs-12">
<div class="adp-img"></div>
<h4>Before Compress</h4>
<div class="d-flex">
<span style="width:50%"><b>Name</b></span>
<span id="name"></span>
</div>
<div class="d-flex">
<span style="width:50%"><b>Size</b></span>
<span id="size"></span>
</div>
<div class="d-flex">
<span><b>Last Modified</b></span>
<span id="lastModifiedDate"></span>
</div>
</div>
<div class="col-md-6 cil-xs-12">
<div class="res-img"> </div>
<h4>After Compress</h4>
<div class="d-flex">
<span style="width:50%"><b>Size</b></span>
<span id="asize"></span>
</div>
<div class="d-flex">
<span><b>Last Modified</b></span>
<span id="alastModifiedDate"></span>
</div>
<div class="alert alert-danger" style="display:none"></div>
</div>
</div>
</div>
</div>
</div>
</section>