<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layered Image with Text</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
img {
object-fit: contain;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
</style>
</head>
<body>
<img/>
<script type="module">
let ids = [
"b3439caced5f6761b2af00fba7410e6b6dc0384f6fd59c62813e8291d201984ai5",
"d02b06333d46d68e0e399473e2f2c2b58fc08b836a0acbe013953f61e3322a35i15",
"b3439caced5f6761b2af00fba7410e6b6dc0384f6fd59c62813e8291d201984ai9",
"652468bbffab47809ce85bb8307eee6d9b0e9fab755e508f87803425ec148c26i0"
];
let canvas = new OffscreenCanvas(1448, 1448); // Розмір полотна
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.fillStyle = '#ffffff'; // Заливка фону білим кольором
ctx.fillRect(0, 0, canvas.width, canvas.height);
(await Promise.all(
ids.map(id => new Promise(resolver => {
let image = new Image();
image.crossOrigin = 'anonymous';
image.onload = () => resolver(image);
image.src = `/content/${id}`; // Шлях до зображення
}))
)).forEach(image => {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // Накладання зображення на всю площу
});
ctx.fillStyle = 'purple';
ctx.font = 'bold 64px sans-serif';
ctx.fillText('Experiment 9', 20, 70);
ctx.font = 'bold 48px sans-serif';
ctx.textAlign = 'right';
ctx.fillText('Aarune BTC', canvas.width - 20, canvas.height - 20);
ctx.font = 'bold 64px sans-serif';
ctx.fillText('Commoners', canvas.width - 20, 70);
document.querySelector('img').src = URL.createObjectURL(await canvas.convertToBlob());
</script>
</body>
</html>