estoy trabajando con canvas
Quiero cargar imágenes en diferentes lienzos pero el problema es que todas las imágenes están dibujadas en el mismo lienzo
Quiero que las imágenes se carguen por separado en cada lienzo de forma dinámica.
He compartido el violín js a continuación junto con el código
https://jsfiddle.net/ewhom2db/
HTML
<canvas id="canvas"></canvas>JS
let sampleData = [ {"imageWidth":3000,"imageHeight":2000,"imagePrefix":"https://swall.teahub.io/photos/small/","thumbPath":"291-2915301_crculos-gradiente-desvanecidos-degradado-3000-x-2000.jpg","x1":200,"x2":150,"y1":150,"y2":200}, {"imageWidth":2000,"imageHeight":2000,"imagePrefix":"https://swall.teahub.io/photos/small/","thumbPath":"281-2819581_2000-x-2000-wallpapers-25238i6-anime-photos-2000.jpg","x1":200,"x2":150,"y1":150,"y2":200} ]; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < sampleData.length; i++) { let base_image = new Image(); base_image.src = sampleData[i].imagePrefix + sampleData[i].thumbPath; let x1 = sampleData[i].x1; let x2 = sampleData[i].x2; let y1 = sampleData[i].y1; let y2 = sampleData[i].y2; let imageWidth = sampleData[i].imageWidth; let imageHeight = sampleData[i].imageHeight; canvas.width = imageWidth; canvas.height = imageHeight; base_image.onload = function () { // base_image.src = this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath; ctx.drawImage(base_image, 0, 0); ctx.strokeRect(x1, y1, x2 - x1, y2 - y1); // base_image.src.push(this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath); }; }Se agradecerá la ayuda gracias
Está dibujando sobre el mismo contexto de lienzo cada vez que dibuja una imagen. Si desea dibujar cada imagen en un lienzo separado, debe tener lienzos separados para dibujarlos.
Puede crear una matriz de lienzos y luego dibujar en el contexto de cada lienzo.
let sampleData = [ { imageWidth: 3000, imageHeight: 2000, imagePrefix: "https://swall.teahub.io/photos/small/", thumbPath: "291-2915301_crculos-gradiente-desvanecidos-degradado-3000-x-2000.jpg", x1: 200, x2: 150, y1: 150, y2: 200 }, { imageWidth: 2000, imageHeight: 2000, imagePrefix: "https://swall.teahub.io/photos/small/", thumbPath: "281-2819581_2000-x-2000-wallpapers-25238i6-anime-photos-2000.jpg", x1: 200, x2: 150, y1: 150, y2: 200 } ]; let canvas = []; let ctx = []; for (let i = 0; i < sampleData.length; i++) { canvas.push(document.createElement("canvas")) ctx.push(canvas[i].getContext('2d')); document.body.appendChild(canvas[i]); let base_image = new Image(); base_image.src = sampleData[i].imagePrefix + sampleData[i].thumbPath; let x1 = sampleData[i].x1; let x2 = sampleData[i].x2; let y1 = sampleData[i].y1; let y2 = sampleData[i].y2; let imageWidth = sampleData[i].imageWidth; let imageHeight = sampleData[i].imageHeight; canvas[i].width = imageWidth; canvas[i].height = imageHeight; base_image.onload = function () { // base_image.src = this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath; ctx[i].drawImage(base_image, 0, 0); ctx[i].strokeRect(x1, y1, x2 - x1, y2 - y1); // base_image.src.push(this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath); }; }Su imagen parece estar tan separada porque sus lienzos son enormes pero la imagen no llena el lienzo.