Изображение появляется только при выборе на холсте Fabric JS

Question

Я пытаюсь добавить изображение на холст с тканью JS, но изображение появляется только при нажатии или выборе его окружающей области, которая является групповым объектом.Предполагается, что изображение появится сразу после окончания загрузки страницы.Вот фрагмент для исходного кода.Любая помощь будет оценена.

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

    img.on('click', function () {
        console.log('img clicked');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Answer 1

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

/* will not work - use mousedown or you should use events provided by fabric
    img.on('click', function () {
        console.log('img clicked');
    });
*/
// use this option if you want to load image from other domain
}, {crossOrigin: 'anonymous'});

const mouseDownHandler = (e) => {
console.log('mouseDownHandler: yep! someone clicked on canvas');
if(e.target && e .target.type === "image") console.log('mouseDownHandler: and smashed image!');
}

const selectionCreatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionCreatedHandler: yep! someone selected image')
}

const selectionUpdatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionUpdatedHandler: yep! someone selected object instead of previously selected')
}


canvas.on('selection:created', selectionCreatedHandler);
canvas.on('selection:updated', selectionUpdatedHandler);
canvas.on('mouse:down', mouseDownHandler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Answer 2

Вам нужно использовать mousedown событие, а не click.И используйте свойство crossOrigin для объекта изображения, если вы загружаете с другого сервера.

DEMO

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
  left: circle.left,
  top: circle.top,
  fontFamily: 'Arial',
  fontWeight: 'bold',
  fontSize: 10,
  fill: 'black',
  originX: 'center',
  originY: 'center',
});

const group = new fabric.Group([circle, text], {
  left: circle.left,
  top: circle.top,
  originX: 'center',
  originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
  img.set({
    left: group.left + 20,
    top: group.top,
    perPixelTargetFind: true,
    padding: 0,
    hasBorders: false,
    hasControls: false,
    width: 16,
    height: 16,
    originX: 'center',
    originY: 'center',
  })
  canvas.add(img);
  
  img.on('mousedown', function() {
    console.log('img clicked');
  });

}, {
  crossOrigin: 'annonymous'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>