当我有多个图像时，绘制图像无法正常工作

Question

我正在尝试制作许可证。 一切都好，除了图像。 当我只有画布时，它工作正常，但是当我添加另一个画布时，最后一个许可证图像会在第一个图像中绘制，我不知道如何很好地解释它。 我有这个来制作画布。 提前致谢。

顺便说一句，我已经搜索了有关此的信息，但我不清楚如何在我的代码中实现一些解决方案。 谢谢阅读。

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 {}
}

Answer 1

您遇到了提升问题：修复：使用let关键字而不是var

for(let x = 0; x < datos.regs.length; x++){
   fotos.push(datos.regs[x].foto);
}

Answer 2

首先用迭代器f删除 for 删除它和它们的括号（显然）。

使用加载图像的函数，我们称之为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];
}

由于我们不需要mostrarRegs()函数中的cedFoto.onload和zodImg.onload ，因此将其删除。

因此，您的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{}
}

生肖形象几乎相同。