[html]
<div style="width:600px;margin:20px auto;text-align:center">
<canvas id="botyCanvas" width="600" height="860" style="display:block"></canvas>
<br>
<input type="file" id="fileInput" accept="image/*" style="display:none">
</div>
<script>
const canvas = document.getElementById("botyCanvas");
const ctx = canvas.getContext("2d");
const bg = new Image();
bg.src = "https://upforme.ru/uploads/001b/ff/2a/183/420973.png";
const slots = [
// ВЕРХ 6
{x:26,y:24,w:72,h:97},{x:121,y:24,w:72,h:97},{x:220,y:24,w:72,h:97},
{x:316,y:24,w:72,h:97},{x:412,y:25,w:72,h:97},{x:505,y:25,w:72,h:97},
// ВЕРХ 3
{x:74,y:138,w:72,h:97},{x:267,y:139,w:72,h:97},{x:460,y:138,w:72,h:97},
// ВЕРХ 2
{x:170,y:187,w:72,h:97},{x:365,y:185,w:72,h:97},
// ВЕРХ 1
{x:265,y:273,w:72,h:97},
// НИЗ 1
{x:264,y:482,w:72,h:97},
// НИЗ 2
{x:170,y:571,w:72,h:97},{x:362,y:572,w:72,h:97},
// НИЗ 3
{x:73,y:619,w:72,h:97},{x:266,y:619,w:72,h:97},{x:460,y:619,w:72,h:97},
// НИЗ 6
{x:28,y:733,w:72,h:97},{x:119,y:733,w:72,h:97},{x:219,y:732,w:72,h:97},
{x:312,y:732,w:72,h:97},{x:411,y:731,w:72,h:97},{x:504,y:731,w:72,h:97},
// БОЛЬШОЙ СПРАВА
{x:412,y:325,w:140,h:195}
];
let images = new Array(slots.length).fill(null);
let activeSlot = null;
bg.onload = drawAll;
function drawAll(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(bg,0,0);
images.forEach((img,i)=>{
if(img){
const s = slots[i];
ctx.drawImage(img,s.x,s.y,s.w,s.h);
}
});
}
canvas.addEventListener("click",e=>{
const r = canvas.getBoundingClientRect();
const x = e.clientX - r.left;
const y = e.clientY - r.top;
slots.forEach((s,i)=>{
if(x>=s.x && x<=s.x+s.w && y>=s.y && y<=s.y+s.h){
activeSlot = i;
document.getElementById("fileInput").click();
}
});
});
document.getElementById("fileInput").addEventListener("change",function(){
const file = this.files[0];
if(!file || activeSlot===null) return;
const img = new Image();
const r = new FileReader();
r.onload = e=>{
img.onload = ()=>{
images[activeSlot] = img;
drawAll();
};
img.src = e.target.result;
};
r.readAsDataURL(file);
this.value="";
});
</script>
[/html]
