mirror of
https://github.com/andrewstephens75/as-dithered-image.git
synced 2026-04-14 12:29:30 -07:00
85 lines
2.4 KiB
HTML
85 lines
2.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>
|
|
|
|
<div style="min-height: 4000px; border: 1px solid black"></div>
|
|
|
|
<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" />
|
|
<input id="choosefile" type="file" />
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
function displayFromFile(file) {
|
|
if (!file.type.startsWith("image/")) {
|
|
return
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
document.getElementById("picture").setAttribute("src", e.target.result)
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
|
|
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)
|
|
|
|
})
|
|
document.getElementById("choosefile").addEventListener("change", e => {
|
|
const files = e.target.files
|
|
if (files.length == 0) {
|
|
return
|
|
}
|
|
|
|
displayFromFile(files[0])
|
|
}, false)
|
|
|
|
const pictureElement = document.getElementById("picture")
|
|
pictureElement.addEventListener("drop", e => {
|
|
e.preventDefault()
|
|
|
|
if (e.dataTransfer.files.length == 0) {
|
|
return
|
|
}
|
|
displayFromFile(e.dataTransfer.files[0])
|
|
|
|
})
|
|
|
|
pictureElement.addEventListener("dragover", e => {
|
|
e.preventDefault() // need this to disable the default
|
|
})
|
|
</script>
|
|
|
|
</html> |