upload.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="dogeicon.js" async></script> 6 <script src="upload.js" async></script> 7 </head> 8 <body> 9 <p>Compressed enlarged • Compressed actual size • Source image • Original</p> 10 <canvas id="c" width="48" height="48" style="border:1px solid silver"></canvas> 11 <canvas id="d" width="48" height="48" style="border:1px solid silver"></canvas> 12 <canvas id="o" width="48" height="48" style="border:1px solid silver"></canvas> 13 <img id="pre"><span id="mt"></span> 14 <br><label for="u">Choose: </label><input id="u" type="file" name="upload"> <input id="cm" type="button" value="Compress"> 15 <br>Side by side: <canvas id="dl" width="96" height="48" style="border:1px solid silver; margin-top:1em"></canvas> 16 <ul> 17 <li>+ zoom in source</li> 18 <li>- zoom out source</li> 19 <li>c linear + weighted average samping (best)</li> 20 <li>1 average 4 chroma samples</li> 21 <li>2 average 2 chroma samples (horizontal)</li> 22 <li>3 top-left chroma sample</li> 23 <li>4 weighted average sample</li> 24 <li>l linear interploation</li> 25 <li>p pixellated interploation</li> 26 <li>o automatic interploation (minimum sum of absolute difference)</li> 27 </ul> 28 </body> 29 </html>