Question

0

219

Visualizações

Draw array of images in separate canvas

Im working with canvas

I want to load images in different canvas but the problem is all the images are drawn in the same canvas

I want the images to be loaded separately in each canvas dynamically

I have shared the js fiddle below along with the code

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);

  };


      }

Help will be appreciated thanks

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-05T16:14:35.597Z

You are drawing over the same canvas context every time you draw an image. If you want to draw each image to a separate canvas then you need to have separate canvases to draw them to.

You could create an array of canvases and then draw to the context of each canvas.

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);
  };
}

Your image appear to be so far apart because your canvases are huge but the image doesn't fill the canvas.

0

219

Draw array of images in separate canvas

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT