Knot Ángel
Reputation: 23
Draw Image is not working properly when I have more than one Image
I was trying to make license(s). Everything is oka, except for the images. When I have a canvas only it works fine, but when I add another one the last license image paints in the first one, I don't know how to explain it very well. I have this to make the canvas. Thanks in advance.
Btw, I've already searched around for information about this, but I'm not clear about how to implement some solutions in my code. Thanks for reading.
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 {}
}
Upvotes: 2
Views: 74
Answers (2)
Angel
Reputation: 114
First remove the for with the iterator f remove it and their brackets (obviously).
Use a function where you load the image, let's call it setImage() it'll receive the variable i (from the for) the element cedFoto, a reference to the image that you want to draw and a reference to the context.
By the way, define your array fotos (the array that will store the images sources) in the start of your code. And fill it in the function mostrarRegs, if not, you may have duplicated images. So, AT START:
var fotos = []
At mostrarRegs() function do this:
fotos = []
for(let x = 0; x < datos.regs.length; x++){
fotos.push(datos.regs[x].foto);
}
You must do fotos = [] if not, you may have duplicated values when adding a new license.
Create the setImage function;
function setImage(index, image, canvasContext){
image.onload = function(){
canvasContext.drawImage(image, 8, 50, 90, 110);
}
image.src = fotos[index];
}
As we don't need the cedFoto.onload and zodImg.onload in the mostrarRegs() function, remove that.
So, your mostrarRegs() function (after changes):
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{}
}
Almost the same for the zodiac image.
Upvotes: 1
Mosè Raguzzini
Reputation: 15841
You incurred in a hoisting issue:
Fix: use let keyword instead of var
for(let x = 0; x < datos.regs.length; x++){
fotos.push(datos.regs[x].foto);
}
Upvotes: 1
Related Questions
- Cant draw same image on multiple canvases
- drawImage doesnt work in canvas
- Javascript Canvas, can't draw multiple images
- Only one image being drawn to canvas
- cant draw images to canvas in js
- Canvas drawImage is Not Working
- How to draw multiple images on canvas?
- drawImage is not working
- Can't draw several copies of the same image on canvas?
- canvas drawImage doesn't draw images the first time