downscale
Version:
Better image downscale with canvas.
60 lines (50 loc) • 1.69 kB
HTML
<html><head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Better image downscale demo</title>
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<style>
body {
font-size: 1.5rem;
}
h1, p {
width: 1080px;
}
h1, p, table {
margin-left: auto;
margin-right: auto;
}
img {
display: block;
}
th {
width: 540px;
}
</style>
</head><body>
<h1>Better image downscale demo (<a href="https://github.com/ytiurin/downscale">fork on Github</a>)</h1>
<p>Downscale images with an area-average downsampling and <a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/" title="Faster Canvas Pixel Manipulation with Typed Arrays">faster pixel manipulation with Typed Arrays</a>.</p>
<p>Pick your local images (multiselection works)
<input type="file" accept="image/*" onchange="filesChanged(this.files)" multiple />
<progress></progress>
</p>
<p>
<label>
<input type="checkbox" onchange="canvasSmoothingChanged(this.checked)" />
Enable canvas smoothing (for newest browsers)
</label>
</p>
<br/>
<table>
<thead>
<tr>
<th align="left">Canvas resizing</th>
<th align="left">Better downscale</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript" src="../dist/downscale.js"></script>
<script type="text/javascript" src="multiselect.js"></script>
</body></html>