mirror of
https://github.com/andrewstephens75/as-dithered-image.git
synced 2026-04-14 04:29:28 -07:00
32 lines
888 B
HTML
32 lines
888 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<style>
|
|
.canvasstyle {
|
|
display: inline-block;
|
|
width: 90%;
|
|
aspect-ratio: 640 / 954;
|
|
min-width: 90%;
|
|
padding: auto;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
|
|
<script src="as-dithered-image.js"></script>
|
|
<script>
|
|
window.addEventListener("load", (e) => {
|
|
const c = document.getElementById("pixel")
|
|
|
|
c.innerText = window.devicePixelRatio
|
|
})
|
|
</script>
|
|
|
|
<body>
|
|
<!-- <canvas id="drawing" class="canvasstyle" width="1024" height="768"></canvas> -->
|
|
<as-dithered-image src="monalisa.jpg" class="canvasstyle" crunch="1"></as-dithered-image>
|
|
<as-dithered-image src="monalisa.jpg" class="canvasstyle" crunch="2"></as-dithered-image>
|
|
<as-dithered-image src="monalisa.jpg" class="canvasstyle" crunch="pixel"></as-dithered-image>
|
|
The device pixel ratio = <span id="pixel"></span>
|
|
</body>
|
|
|
|
</html> |