compressor js

4564 28 November 2019

No Description Available

Abhishek Singh

~ onex

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

Related Elements

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

Javascript image compressor

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>
                            <input type="checkbox" id="strict" checked> <label>Strict </label>&nbsp;
                            <input type="checkbox" id="checkOrientation"> <label>checkOrientation </label> &nbsp;&nbsp;
                            <label>Quality </label>
                        <select class="quality form-control" style="display:inline;width:40%">
                            <option value="0">0</option> <option value="0.1">0.1</option>
                            <option value="0.2">0.2</option> <option value="0.3">0.3</option>
                            <option value="0.4">0.4</option> <option value="0.5">0.5</option>
                            <option selected value="0.6">0.6</option> <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option> <option value="0.9">0.9</option>
                            <option value="1">1</option> <option value="">NaN</option>

                        </select>
                        </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="d-flex">
                        <span style="width:50%"><b>Saving</b ></span> 
                        <span class='text-success' id="saving"></span>
                    </div>
                    <a href="#" class="btn btn-primary" id="download" style="display:none">Download</a>
                      <div class="alert alert-danger" style="display:none"></div>
                      
                              
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Get HTML

Get CSS

Get JS

compressor js

Abhishek Singh

Related Elements

Javascript image compressor

Resourse

Log in