No Description Available
0
This Javascript image compressor built using browser image compressor Javascript library.
This Javascript image compressor built using browser image compressor js Javascript library.
onex
$('#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>