Javascript image compressor

1083 28 November 2019

No Description Available

Abhishek Singh

~ onex

This Javascript image compressor built using browser image compressor Javascript library.

Related Elements

5364
1
0

This Javascript image compressor built using browser image compressor js Javascript library.

compressor js

onex

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

Get HTML

Get CSS

Get JS

Javascript image compressor

Abhishek Singh

Related Elements

compressor js

Resourse

Log in