APIs
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
position: relative;
width: 24rem;
height: 24rem;
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
top: 0;
left: 0;
image-rendering: pixelated;
}
</style>
<body>
<canvas id="canvas" width="24" height="24"></canvas>
<script>
var isBlackAndWhite = true;
var originalImageData = null;
function convertToBlackAndWhite() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 21;
var y = 5;
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
for (var i = 0; i < pixels.length; i += 4) {
var currentX = (i / 4) % canvas.width;
var currentY = Math.floor(i / (4 * canvas.width));
if (currentX === x && currentY === y) {
pixels[i] = 255;
pixels[i + 1] = 73;
pixels[i + 2] = 0;
pixels[i + 3] = 255;
} else {
var red = pixels[i];
var green = pixels[i + 1];
var blue = pixels[i + 2];
var grayscaleValue = red * 0.3 + green * 0.59 + blue * 0.11;
pixels[i] = grayscaleValue;
pixels[i + 1] = grayscaleValue;
pixels[i + 2] = grayscaleValue;
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
isBlackAndWhite = true;
}
function restoreOriginalColors() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(originalImageData, 0, 0);
isBlackAndWhite = false;
}
function toggleColors() {
if (isBlackAndWhite) {
restoreOriginalColors();
} else {
convertToBlackAndWhite();
}
}
function loadImage() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function () {
ctx.drawImage(img, 0, 0);
originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
setTimeout(convertToBlackAndWhite, 0);
};
img.src = '/content/6defa75c3d57fed23c4205ee258d434bd7ccde8e32b0f4f1bbddc04823fc7d8di0';
}
window.onload = function () {
var canvas = document.getElementById('canvas');
canvas.addEventListener('click', toggleColors);
loadImage();
};
</script>
</body>
</html>ID
72493208a1cfb836088d7cddbb9662d8698af6acef93d2cd439946e0f6ca1c06i0
Copy
Genesis Txid
UTXO
89cfccb0e0b1b4f91a289c38dc04d2c04f518304ef1ab38fa9298849158a3b71:1
Location
89cfccb0e0b1b4f91a289c38dc04d2c04f518304ef1ab38fa9298849158a3b71:1:0
UTXO Value
10000 sat
Created Time
06-25-2023 11:06:46 (Local)
Genesis Blockheight
795794
Location Blockheight
797840
Content Type
text/html;charset=utf-8
Content Size
3021 bytes
