Как я могу добавить и изменить размер изображений из URL-адресов на холст HTML с помощью fabri c. js? - PullRequest
Новая
       132

Как я могу добавить и изменить размер изображений из URL-адресов на холст HTML с помощью fabri c. js?

1 голос
/ 08 мая 2020

У меня есть массив с кучей изображений: 

const imgSrcs = ["dashavatar1.jpg", "dashavatar2.jpg", "dashavatar 3.jpg"];

И я создаю объект изображения из него, используя конструктор Image: 

const images = [];

for (i = 0; i < imgSrcs .length; i++) {
  const image = new Image();
  images.push(image);
}

Теперь я хочу чтобы назначить источник изображения и добавить эти объекты изображения на холст, используя fabric.js.

1 Ответ

2 голосов
/ 08 мая 2020

Вам нужно сначала загрузить эти изображения, используя const img = new Image(), подождать, пока они загрузятся, используя image.onload, а затем использовать ctx.drawImage(img, x, y, width, height) для рендеринга в холст: 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const innerWidth = canvas.width = window.innerWidth;
const innerHeight = canvas.height = window.innerHeight;
const images = [
  'https://i.stack.imgur.com/L5XWd.png',
  'https://i.stack.imgur.com/SnOAO.png',
];

images.forEach((src, i) => {
  const image = new Image();
  image.src = src;

  image.onload = () => {
    ctx.drawImage(image, innerWidth / 2 - 16, 8 + 40 * i, 32, 32);
  };
});
body {
  margin: 0;
  height: 100vh;
}

#canvas {
  width: 100%;
  height: 100%;
}
<canvas id="canvas"></canvas>

С frabric.js вы бы сделали то же самое, но с использованием их собственной fabric.Image.fromUR функции: 

const canvas = new fabric.Canvas('canvas');
const innerWidth = canvas.width = window.innerWidth;
const innerHeight = canvas.height = window.innerHeight;
const images = [
  'https://i.stack.imgur.com/L5XWd.png',
  'https://i.stack.imgur.com/SnOAO.png',
];

canvas.setWidth(innerWidth);
canvas.setHeight(innerHeight);

images.forEach((src, i) => {
  fabric.Image.fromURL(src, (image) => {
    const oImage = image.set({
      left: canvas.getWidth() / 2 - 16,
      top: 8 + 40 * i,
      scaleX: 32 / image.width,
      scaleY: 32 / image.height,
      scale: 1,
    });
  
    canvas.add(oImage);
  });
});
body {
  margin: 0;
  height: 100vh;
}

#canvas {
  width: 100%;
  height: 100%;
}
<canvas id="canvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
...