mirror of
https://github.com/hexahigh/games.git
synced 2025-12-11 20:15:38 +01:00
55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<html>
|
|
|
|
<body>
|
|
<div>
|
|
<input type="file" id="image-input" accept="image/*">
|
|
<img id="preview"></img>
|
|
<button onclick="const img = document.getElementById('preview');
|
|
const blackAndWhiteImg = convertToBlackAndWhite(img);
|
|
">Black and white</button>
|
|
</div>
|
|
<script>
|
|
let imgInput = document.getElementById('image-input');
|
|
imgInput.addEventListener('change', function (e) {
|
|
if (e.target.files) {
|
|
let imageFile = e.target.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
var img = document.createElement("img");
|
|
img.onload = function (event) {
|
|
var canvas = document.createElement("canvas");
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.drawImage(img, 0, 0, 48, 48);
|
|
var dataurl = canvas.toDataURL(imageFile.type);
|
|
document.getElementById("preview").src = dataurl;
|
|
}
|
|
img.src = e.target.result;
|
|
}
|
|
reader.readAsDataURL(imageFile);
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function convertToBlackAndWhite(img) {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const imgData = ctx.getImageData(0, 0, img.width, img.height);
|
|
|
|
for (let i = 0; i < imgData.data.length; i += 4) {
|
|
let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];
|
|
let colour = 0;
|
|
if (count > 383) colour = 255;
|
|
imgData.data[i] = colour;
|
|
imgData.data[i + 1] = colour;
|
|
imgData.data[i + 2] = colour;
|
|
imgData.data[i + 3] = 255;
|
|
}
|
|
|
|
ctx.putImageData(imgData, 0, 0);
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |