在单独 canvas 中绘制图像数组

Question

我正在与 canvas

合作

我想加载不同的图像 canvas 但问题是所有图像都是在同一个 canvas

中绘制的

我希望在每个 canvas 中动态地单独加载图像

我已经分享了下面的 js fiddle 和代码

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

  };


      }

感谢帮助

Answer 1

每次绘制图像时，您都在相同的 canvas 上下文中绘制。如果你想将每个图像绘制到一个单独的 canvas，那么你需要有单独的 canvases 来绘制它们。

您可以创建一个 canvas 数组，然后绘制到每个 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);
  };
}

您的图片看起来相距很远，因为您的 canvas 很大，但图片没有填满 canvas。

在单独 canvas 中绘制图像数组

Draw array of images in separate canvas

javascript

html

html5-canvas