pixelate
Version:
Pixelate an image with canvas
23 lines (19 loc) • 1.1 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Pixelate.js</title>
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<h1>Pixelate.js</h1>
<div class="container">
<div class="pixelation">Pixelation: <input class="slider" type="range" min="0" max="100" value="70" /> <output id="output"></output></div>
<img class="image" src="images/street.jpeg" alt="Street Image">
</div>
<a href="https://github.com/miguelmota/pixelate" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script src="../pixelate.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>