|
| 1 | +{% addScript 'img' %} |
| 2 | +{% addStyle 'webutils' %} |
| 3 | + |
| 4 | +<span class="info">convert </span> |
| 5 | +<input type="file" id="img-input" accept="image/png, image/jpeg, image/svg+xml, image/webp, image/ico, image/bmp" /> |
| 6 | +<span class="info"> to </span> |
| 7 | +<select id="img-format"> |
| 8 | + <option value="png">png</option> |
| 9 | + <option value="jpeg">jpg</option> |
| 10 | + <option value="webp">webp</option> |
| 11 | + <option value="ico">ico</option> |
| 12 | + <option value="bmp">bmp</option> |
| 13 | +</select> |
| 14 | +<span id="img-formatInfo" class="warning hidden" title="not supported by all browsers & platforms">⚠️</span> |
| 15 | +<br> |
| 16 | +<table id="img-options" class="disabled"> |
| 17 | + <caption>options</caption> |
| 18 | + <thead hidden> |
| 19 | + <tr> |
| 20 | + <th>option</th> |
| 21 | + <th>value</th> |
| 22 | + </tr> |
| 23 | + </thead> |
| 24 | + <tr id="quality"> |
| 25 | + <td class="info">quality</td> |
| 26 | + <td> |
| 27 | + <input type="range" min="0" max="100" value="100" step="10" id="qualitySlider" disabled /> |
| 28 | + <span id="qualityValue">loseless</span> |
| 29 | + </td> |
| 30 | + </tr> |
| 31 | + <tr id="width"> |
| 32 | + <td class="info">width</td> |
| 33 | + <td><input type="number" min="0" max="5000" value="0" id="widthInput" disabled /> px</td> |
| 34 | + </tr> |
| 35 | + <tr id="height"> |
| 36 | + <td class="info">height</td> |
| 37 | + <td><input type="number" min="0" max="5000" value="0" id="heightInput" disabled /> px</td> |
| 38 | + </tr> |
| 39 | + <tr id="keepRatioRow"> |
| 40 | + <td><label for="keepRatio" class="info">keep ratio</label></td> |
| 41 | + <td><input type="checkbox" id="keepRatio" checked disabled /></td> |
| 42 | + </tr> |
| 43 | +</table> |
| 44 | +<br> |
| 45 | +<span class="button disabled" id="img-convert">convert</span> |
| 46 | +<hr> |
| 47 | +<a class="button hidden" id="img-download"><img src="/assets/icons/button/download.svg" class="icon invert" alt=""> download</a> <br> |
| 48 | +<span class="info" id="img-filename"></span><br> |
| 49 | +<img id="img-canvas" alt="converted image" hidden /> |
0 commit comments