所以我正在尝试用minecraft皮肤创建一个minecraft像素
所以它需要大量的切割
一切都很好,除了canvasPIXEL什么都没做
我试了很多,但都没用——画布有点长
所以很难找到问题,所以我在这里询问是否有人能帮我
我在discord.js中使用了相同的代码,但几乎没有什么不同,所以我使用了
canvas.js(npm)
let skinin = document.getElementById("skin");
skinin.addEventListener("change", handleFiles);
function handleFiles(e) {
const canvas = document.getElementById("canvas");
const canvasFACE = document.getElementById("canvasFACE");
const canvasFACEH= document.getElementById("canvasFACEH");
const canvasFACEH2 = document.getElementById("canvasFACEH2");
const canvas1 = document.getElementById("canvas1");
const canvas2 = document.getElementById("canvas2");
const canvas3 = document.getElementById("canvas3");
const canvas4 = document.getElementById("canvas4");
const canvas5 = document.getElementById("canvas5");
const canvas6 = document.getElementById("canvas6");
const canvas7 = document.getElementById("canvas7");
const canvas8 = document.getElementById("canvas8");
const canvas9 = document.getElementById("canvas9");
const canvas10 = document.getElementById("canvas10");
const canvas12 = document.getElementById("canvas12");
const canvas13 = document.getElementById("canvas13");
const canvas14 = document.getElementById("canvas14");
const canvas15 = document.getElementById("canvas15");
const canvas16 = document.getElementById("canvas16");
const canvas17 = document.getElementById("canvas17");
const canvas18 = document.getElementById("canvas18");
const canvas19 = document.getElementById("canvas19");
const canvasPIXEL = document.getElementById("canvasPIXEL");
const ctx = canvas.getContext('2d');
const ctxface = canvasFACE.getContext('2d');
const ctxfaceh = canvasFACEH.getContext('2d');
const ctxfaceh2 = canvasFACEH2.getContext('2d');
const ctx2 = canvas1.getContext('2d');
const ctx3 = canvas2.getContext('2d');
const ctx4 = canvas3.getContext('2d');
const ctx5 = canvas4.getContext('2d');
const ctx6 = canvas5.getContext('2d');
const ctx7 = canvas6.getContext('2d');
const ctx8 = canvas7.getContext('2d');
const ctx9 = canvas8.getContext('2d');
const ctx10 = canvas9.getContext('2d');
const ctx11 = canvas10.getContext('2d');
const ctx13 = canvas12.getContext('2d');
const ctx14 = canvas13.getContext('2d');
const ctx15 = canvas14.getContext('2d');
const ctx16 = canvas15.getContext('2d');
const ctx17 = canvas16.getContext('2d');
const ctx18 = canvas17.getContext('2d');
const ctx19 = canvas18.getContext('2d');
const ctx20 = canvas19.getContext('2d');
const ctxpixel = canvasPIXEL.getContext('2d');
const canvasElements = [
canvas, canvasFACE, canvasFACEH, canvasFACEH2,
canvas1, canvas2, canvas3, canvas4, canvas5,
canvas6, canvas7, canvas8, canvas9, canvas10,
canvas12, canvas13, canvas14, canvas15,
canvas16, canvas17, canvas18, canvas19
];
canvasElements.forEach(canvas => {
canvas.width = canvas.height = 64;
});
canvasPIXEL.width = 20
canvasPIXEL.height = 20
const Skin = new Image();
Skin.onload = function () {
//FACE
ctx.drawImage(Skin, -8, -9, canvas.width, canvas.height);
const FACE = new Image();
FACE.src = canvas.toDataURL();
FACE.onload = function () {
ctxface.drawImage(FACE, 57, 57, canvasFACE.width, canvasFACE.height);
}
//FACE HELM
ctxfaceh.drawImage(Skin, -40, -8 , canvasFACEH.width , canvasFACEH.height);
const FACEHELM = new Image()
FACEHELM.src = canvasFACEH.toDataURL();
FACEHELM.onload = function () {
ctxfaceh2.drawImage(FACEHELM, 56, 56 , canvasFACEH2.width , canvasFACEH2.height);
}
//BACKHEAD
ctx2.drawImage(Skin, -6, -9 , canvas1.width , canvas1.height);
const FACE2 = new Image()
FACE2.src = canvas1.toDataURL();
FACE2.onload = function () {
ctx3.drawImage(FACE2, 61, 57 , canvas2.width , canvas2.height);
}
//BACKHEAD HELM
ctx4.drawImage(Skin, -32, -8 , canvas3.width , canvas3.height);
const FACEHELM2 = new Image()
FACEHELM2.src = canvas3.toDataURL();
FACEHELM2.onload = function () {
ctx5.drawImage(FACEHELM2, 61, 56 , canvas4.width , canvas4.height);
}
//BODY
ctx6.drawImage(Skin, -21, -21 , canvas5.width , canvas5.height);
const BODY = new Image()
BODY.src = canvas5.toDataURL();
BODY.onload = function () {
ctx7.drawImage(BODY, 58, 55 , canvas6.width , canvas6.height);
}
//RIGHT HAND
ctx8.drawImage(Skin, -44, -25 , canvas7.width , canvas7.height);
const RIGHTHAND = new Image()
RIGHTHAND.src = canvas7.toDataURL();
RIGHTHAND.onload = function () {
ctx9.drawImage(RIGHTHAND, 63, 57 , canvas8.width , canvas8.height);
}
//RIGHT SHOULDER
ctx10.drawImage(Skin, -45, -24 , canvas9.width , canvas9.height);
const RIGHTHAND2 = new Image()
RIGHTHAND2.src = canvas9.toDataURL();
RIGHTHAND2.onload = function () {
ctx11.drawImage(RIGHTHAND2, 63, 56 , canvas10.width , canvas10.height);
}
//RIGHT HAND OVERLAY
ctx13.drawImage(Skin, -44, -42 , canvas12.width , canvas12.height);
const RIGHTHANDOVERLAY = new Image()
RIGHTHANDOVERLAY.src = canvas12.toDataURL();
RIGHTHANDOVERLAY.onload = function () {
ctx14.drawImage(RIGHTHANDOVERLAY, 62, 58 , canvas13.width , canvas13.height);
}
//LEFT HAND
ctx17.drawImage(Skin, -37, -57 , canvas16.width , canvas16.height);
const LEFTHAND = new Image()
LEFTHAND.src = canvas16.toDataURL();
LEFTHAND.onload = function () {
ctx18.drawImage(LEFTHAND, 63, 57 , canvas17.width , canvas17.height);
}
//LEFT SHOULDER
ctx15.drawImage(Skin, -36, -56 , canvas14.width , canvas14.height);
const LEFTHAND2 = new Image()
LEFTHAND2.src = canvas14.toDataURL();
LEFTHAND2.onload = function () {
ctx16.drawImage(LEFTHAND2, 63, 56 , canvas15.width , canvas15.height);
}
//LEFT HAND OVERLAY
ctx19.drawImage(Skin, -52, -57 , canvas18.width , canvas18.height);
const LEFTHANDOVERLAY = new Image()
LEFTHANDOVERLAY.src = canvas18.toDataURL();
LEFTHANDOVERLAY.onload = function () {
ctx20.drawImage(LEFTHANDOVERLAY, 62, 58 , canvas19.width , canvas19.height);
}
//------------END OF CUTTING------------
//FACE
const FACEimg = new Image()
FACEimg.src = canvasFACE.toDataURL();
FACEimg.onload = function () {
ctxpixel.drawImage(FACEimg, -49, -53 , 64 , 64);
}
//FACE HELM
const FACEHELMimg = new Image()
FACEHELMimg.src = canvasFACEH2.toDataURL();
FACEHELMimg.onload = function () {
ctxpixel.drawImage(FACEHELMimg, -48, -53 , 64 , 64);
}
//BACKHEAD
const BACKHEADimg = new Image()
BACKHEADimg.src = canvas2.toDataURL();
BACKHEADimg.onload = function () {
ctxpixel.drawImage(BACKHEADimg, -56, -53 , 64 , 64);
}
//BACKHEAD HELM
const BACKHEADHimg = new Image()
BACKHEADHimg.src = canvas4.toDataURL();
BACKHEADHimg.onload = function () {
ctxpixel.drawImage(BACKHEADHimg, -56, -53 , 64 , 64);
}
//LEFT HAND OVERLAY
const LEFTHANDOVERLAYimg = new Image()
LEFTHANDOVERLAYimg.src = canvas19.toDataURL();
LEFTHANDOVERLAYimg.onload = function () {
ctxpixel.drawImage(LEFTHANDOVERLAYimg, -50, -44 , 64 , 64)
}
//BODY
const BODYimg = new Image()
BODYimg.src = canvas6.toDataURL();
BODYimg.onload = function () {
ctxpixel.drawImage(BODYimg, -51, -44 , 64 , 64);
}
//RIGHT HAND
const RIGHTHANDimg = new Image()
RIGHTHANDimg.src = canvas8.toDataURL();
RIGHTHANDimg.onload = function () {
ctxpixel.drawImage(RIGHTHANDimg, -58, -44 , 64 , 64);
}
//RIGHT SHOULDER
const RIGHTSHOULDERimg = new Image()
RIGHTSHOULDERimg.src = canvas10.toDataURL();
RIGHTSHOULDERimg.onload = function () {
ctxpixel.drawImage(RIGHTSHOULDERimg, -57, -44 , 64 , 64);
}
//RIGHT HAND OVERLAY
const RIGHTHANDOVERLAYimg = new Image()
RIGHTHANDOVERLAYimg.src = canvas13.toDataURL();
RIGHTHANDOVERLAYimg.onload = function () {
ctxpixel.drawImage(RIGHTHANDOVERLAYimg, -57, -44 , 64 , 64);
}
//LEFT HAND
const LEFTHANDimg = new Image()
LEFTHANDimg.src = canvas17.toDataURL();
LEFTHANDimg.onload = function () {
ctxpixel.drawImage(LEFTHANDimg, -49, -44 , 64 , 64);
}
//LEFT SHOULDER
const LEFTSHOULDERimg = new Image()
LEFTSHOULDERimg.src = canvas15.toDataURL();
LEFTSHOULDERimg.onload = function () {
ctxpixel.drawImage(LEFTSHOULDERimg, -50, -44 , 64 , 64);
}
//------------END OF DRAWING------------
// MERGING PIXELART
const canvasSIZE = document.getElementById("canvasSIZE");
const ctxSIZE = canvasSIZE.getContext('2d');
canvasSIZE.width = 1000;
canvasSIZE.height = 1000;
ctxSIZE.imageSmoothingEnabled = false;
const PIXELART = new Image();
PIXELART.src = canvasPIXEL.toDataURL();
PIXELART.onload = function () {
ctxSIZE.drawImage(PIXELART, 50, 100 , 900 , 900);
console.log(canvasPIXEL.toDataURL());
var PIXERLARTDONE = new Image();
PIXERLARTDONE.id = "pixelart";
PIXERLARTDONE.src = canvasSIZE.toDataURL();
document.getElementById('Pixelart').appendChild(PIXERLARTDONE);
}
}
}
HTML:
<canvas id="canvas"></canvas>
<canvas id="canvasFACE" style="display: none;"></canvas>
<canvas id="canvasFACEH" style="display: none;"></canvas>
<canvas id="canvasFACEH2" style="display: none;"></canvas>
<canvas id="canvas1" style="display: none;"></canvas>
<canvas id="canvas2" style="display: none;"></canvas>
<canvas id="canvas3" style="display: none;"></canvas>
<canvas id="canvas4" style="display: none;"></canvas>
<canvas id="canvas5" style="display: none;"></canvas>
<canvas id="canvas6" style="display: none;"></canvas>
<canvas id="canvas7" style="display: none;"></canvas>
<canvas id="canvas8" style="display: none;"></canvas>
<canvas id="canvas9" style="display: none;"></canvas>
<canvas id="canvas10" style="display: none;"></canvas>
<canvas id="canvas11" style="display: none;"></canvas>
<canvas id="canvas12" style="display: none;"></canvas>
<canvas id="canvas13" style="display: none;"></canvas>
<canvas id="canvas14" style="display: none;"></canvas>
<canvas id="canvas15" style="display: none;"></canvas>
<canvas id="canvas16" style="display: none;"></canvas>
<canvas id="canvas17" style="display: none;"></canvas>
<canvas id="canvas18" style="display: none;"></canvas>
<canvas id="canvas19" style="display: none;"></canvas>
<canvas id="canvasPIXEL" style="display: none;"></canvas>
<canvas id="canvasSIZE" style="display: none;"></canvas>
<input type="file" id="skin" accept="image/*"/>
<label for="skin" class="skinbtn"><div class="skintext">Upload Skin <i class="fa-solid fa-file-import"></i></div></label>
