mirror of
https://github.com/andrewstephens75/as-dithered-image.git
synced 2026-04-14 12:29:30 -07:00
47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Test Page</title>
|
|
</head>
|
|
|
|
<body>
|
|
<script src="as-dithered-image.js"></script>
|
|
<style>
|
|
.setSize {
|
|
width: 80%;
|
|
min-width: 80%;
|
|
}
|
|
</style>
|
|
|
|
<as-dithered-image class="setSize" id="picture"
|
|
src="Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg"></as-dithered-image>
|
|
|
|
<div>devicePixelRatio = <span id=dpr>0</span></p>
|
|
<select id="crunchselect">
|
|
<option value="auto">Automatic</option>
|
|
<option value="pixel">Pixel</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
</select>
|
|
<input id="cutoff" type="range" min="0.0" max="1.0" step="0.05" value="any" />
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
document.getElementById("dpr").innerText = window.devicePixelRatio
|
|
let select = document.getElementById("crunchselect")
|
|
select.addEventListener("change", e => {
|
|
console.log("Crunch = ", e.target.value)
|
|
document.getElementById("picture").setAttribute("crunch", e.target.value)
|
|
})
|
|
document.getElementById("cutoff").addEventListener("change", e => {
|
|
console.log("Value = ", e.target.value)
|
|
document.getElementById("picture").setAttribute("cutoff", e.target.value)
|
|
|
|
})
|
|
</script>
|
|
|
|
</html> |