我正在尝试制作许可证。一切都很好，除了图像。当我只有一个 Canvas 时，它工作得很好，但是当我添加另一个 Canvas 时，最后一个许可证图像会在第一个 Canvas 上绘制，我不知道如何很好地解释它。我有这个来做 Canvas 。提前致谢。
顺便说一句，我已经搜索过相关信息，但我不清楚如何在我的代码中实现一些解决方案。感谢您的阅读。
function mostrarRegs() {
try {
dst = document.querySelector("#divDatos");
dst.innerHTML = "";
var fotos = [];
var iterador = 0;
for (x = 0; x < datos.regs.length; x++) {
fotos.push(datos.regs[x].foto);
}
console.log(fotos);
baseImg = new Image();
console.log("np");
baseImg.onload = function() {
console.log("aqui");
cedFoto = new Image();
for (f = 0; f < datos.regs.length; f++) {
cedFoto.onload = function() {
zodImg = new Image();
zodImg.onload = function() {
for (let i = 0; i < datos.regs.length; i++) {
var posX = 0;
var posY = 0;
spaceFromPic = 105;
div = dce("div");
canvas = dce("canvas");
ctx = canvas.getContext("2d");
canvas.setAttribute("height", "225px");
canvas.setAttribute("width", "360px");
div.setAttribute("style", "margin:8px;")
ctx.drawImage(baseImg, 0, 0);
//cedula
ctx.font = "bold 17pt -apple-system, BlinkMacSystemFont";
ctx.fillText(datos.regs[i].cedula, 130, 70);
//foto
console.log("drawCed");
ctx.drawImage(cedFoto, 8, 50, 90, 110)
//lugar nac ref
ctx.font = "100 11px Verdana";
ctx.fillText("LUGAR DE NACIMIENTO:", spaceFromPic, 86);
//lugar nac src
ctx.font = "bold 14px Arial";
ctx.fillText(datos.regs[i].lugarNac, spaceFromPic, 86 + 15);
//fecha nac ref
ctx.font = "100 11px Verdana";
ctx.fillText("FECHA DE NACIMIENTO:", spaceFromPic, 130);
//fecha nac src
date = new Date(datos.regs[i].fechaNac);
ctx.font = "bold 14px Arial";
ctx.fillText(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(), spaceFromPic, 130 + 15);
//nombres
ctx.font = "bold 17px Arial";
ctx.fillText(datos.regs[i].nombre, spaceFromPic - 97, 180);
//apellidos
ctx.font = "bold 17px Arial";
ctx.fillText(datos.regs[i].apellido, spaceFromPic - 97, 180 + 18);
//signo zod ref
ctx.font = "100 11px Verdana";
ctx.fillText("ZODIACO:", spaceFromPic + 120, 155);
//signo zod src
ctx.font = "bold 14px Arial";
ctx.fillText(datos.regs[i].SignoZodiacal, spaceFromPic + 120, 155 + 15);
//signo zod img
ctx.drawImage(zodImg, spaceFromPic + 185, 129, 60, 60)
//--BTNs
btnDownloadPNG = dce("btn")
btnDownloadJPG = dce("btn")
btnDownloadPDF = dce("btn");
btnDownloadPNG.setAttribute("class", "btn btn-primary")
btnDownloadPNG.setAttribute("style", "margin:2px;")
btnDownloadPNG.setAttribute("id", "btnDownloadPNG" + i)
btnDownloadPNG.innerHTML = "Descargar PNG";
btnDownloadPNG.setAttribute("onclick", "downloadPNG(" + i + ")");
btnDownloadJPG.setAttribute("class", "btn btn-warning");
btnDownloadJPG.setAttribute("style", "margin:2px;")
btnDownloadJPG.innerHTML = "JPG"
btnDownloadJPG.setAttribute("onclick", "downloadJPG(" + i + ")");
btnDownloadJPG.setAttribute("id", "btnDownloadJPG" + i);
btnDownloadPDF.setAttribute("class", "btn btn-danger")
btnDownloadPDF.setAttribute("style", "margin:2px;")
btnDownloadPDF.innerHTML = "PDF"
btnDownloadPDF.setAttribute("onclick", "downloadPDF(" + i + ")");
//--
div.appendChild(canvas)
div.appendChild(dce("br"))
div.appendChild(btnDownloadPNG)
div.appendChild(btnDownloadJPG)
div.appendChild(btnDownloadPDF)
dst.appendChild(div);
ceds.push(canvas);
}
}
zodImg.src = "imgs/signosZodiacalesImgs/Tauro.png";
}
console.log(fotos)
console.log(fotos[iterador])
cedFoto.src = fotos[iterador];
iterador++;
}
}
console.log("salto");
baseImg.src = "imgs/ced.jpg"
} catch {}
}
最佳答案
首先用迭代器删除 for f删除它和它们的括号(显然)。
使用加载图像的函数，我们称之为 setImage()它将接收变量 i (来自 for)元素 cedFoto 、对要绘制的图像的引用以及对上下文的引用。
顺便说一下，定义你的数组 fotos (将存储图像源的数组)位于代码的开头。并填写到函数mostrarRegs中，如果没有，您可能有重复的图像。所以，在开始时:
var fotos = []
在mostrarRegs()函数执行此操作:
fotos = []
for(let x = 0; x < datos.regs.length; x++){
fotos.push(datos.regs[x].foto);
}
你必须做fotos = []如果没有，您在添加新许可证时可能会出现重复的值。
创建setImage函数；
function setImage(index, image, canvasContext){
image.onload = function(){
canvasContext.drawImage(image, 8, 50, 90, 110);
}
image.src = fotos[index];
}
因为我们不需要 cedFoto.onload和zodImg.onload在 mostrarRegs()函数，删除它。
所以，你的mostrarRegs()功能(更改后):
function mostrarRegs(){
try{
dst = document.querySelector("#divDatos");
dst.innerHTML = "";
fotos = []
var iterador=0;
for(let x = 0; x < datos.regs.length; x++){
fotos.push(datos.regs[x].foto);
}
baseImg = new Image();
baseImg.onload = function(){
for(let i = 0; i < datos.regs.length; i++){
var posX = 0;
var posY = 0;
spaceFromPic = 105;
div = dce("div");
var canvas = dce("canvas");
var ctx = canvas.getContext("2d");
canvas.setAttribute("height", "225px");
canvas.setAttribute("width","360px");
div.setAttribute("style", "margin:8px;")
ctx.drawImage(baseImg, 0, 0);
//cedula
ctx.font = "bold 17pt -apple-system, BlinkMacSystemFont";
ctx.fillText(datos.regs[i].cedula, 130, 70);
//foto
cedFoto = new Image();
setImage(i, cedFoto, ctx);
//lugar nac ref
ctx.font = "100 11px Verdana";
ctx.fillText("LUGAR DE NACIMIENTO:", spaceFromPic, 86);
//lugar nac src
ctx.font = "bold 14px Arial";
ctx.fillText(datos.regs[i].lugarNac, spaceFromPic, 86+15);
//fecha nac ref
ctx.font = "100 11px Verdana";
ctx.fillText("FECHA DE NACIMIENTO:", spaceFromPic, 130);
//fecha nac src
date = new Date(datos.regs[i].fechaNac);
ctx.font = "bold 14px Arial";
ctx.fillText(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(), spaceFromPic, 130+15);
//nombres
ctx.font = "bold 17px Arial";
ctx.fillText(datos.regs[i].nombre, spaceFromPic-97, 180);
//apellidos
ctx.font = "bold 17px Arial";
ctx.fillText(datos.regs[i].apellido, spaceFromPic-97, 180+18);
//signo zod ref
ctx.font = "100 11px Verdana";
ctx.fillText("ZODIACO:", spaceFromPic+120, 155);
//signo zod src
ctx.font = "bold 14px Arial";
ctx.fillText(datos.regs[i].SignoZodiacal, spaceFromPic+120, 155+15);
//signo zod img
/*zodImg = new Image();
zodImg.onload = async function(){
ctx.drawImage(zodImg, spaceFromPic+185, 129, 60, 60)
};
zodImg.src = "imgs/signosZodiacalesImgs/"+datos.regs[i].SignoZodiacal+".png";*/
zodImg = new Image();
//setZodImage(i, zodImg, ctx);
//BTW: it's almost the same for the zodiac image.
//--BTNs
btnDownloadPNG = dce("btn")
btnDownloadJPG = dce("btn")
btnDownloadPDF = dce("btn");
btnDownloadPNG.setAttribute("class", "btn btn-primary")
btnDownloadPNG.setAttribute("style", "margin:2px;")
btnDownloadPNG.setAttribute("id", "btnDownloadPNG"+i)
btnDownloadPNG.innerHTML = "Descargar PNG";
btnDownloadPNG.setAttribute("onclick", "downloadPNG("+i+")");
btnDownloadJPG.setAttribute("class", "btn btn-warning");
btnDownloadJPG.setAttribute("style", "margin:2px;")
btnDownloadJPG.innerHTML = "JPG"
btnDownloadJPG.setAttribute("onclick", "downloadJPG("+i+")");
btnDownloadJPG.setAttribute("id", "btnDownloadJPG"+i);
btnDownloadPDF.setAttribute("class", "btn btn-danger")
btnDownloadPDF.setAttribute("style", "margin:2px;")
btnDownloadPDF.innerHTML = "PDF"
btnDownloadPDF.setAttribute("onclick", "downloadPDF("+i+")");
//--
div.appendChild(canvas)
div.appendChild(dce("br"))
div.appendChild(btnDownloadPNG)
div.appendChild(btnDownloadJPG)
div.appendChild(btnDownloadPDF)
dst.appendChild(div);
ceds.push(canvas);
}
}
baseImg.src = "imgs/ced.jpg"
}catch{}
}
十二生肖图像几乎相同。
关于javascript - 当我有多个图像时，绘制图像无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60173328/