Добавление resizeFilter делает изображение исчезающим - PullRequest
Новая
       5

Добавление resizeFilter делает изображение исчезающим

0 голосов
/ 24 октября 2018

Я создал холст FabricJS и добавил изображение с resizeFilter.Как ни странно, изображение исчезает, когда вы немного уменьшаете размер изображения.Если к изображению не добавлено resizeFilter, изменение размера будет работать, как и ожидалось.

Спасибо за помощь! 

var canvas = new fabric.Canvas('c');
var imageSrc = "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/pug.jpg";

fabric.Image.fromURL(imageSrc, function(img) {
  img.set({
    left: 10,
    scaleX: 0.52,
    scaleY: 0.52,
    top: 10,
  }, {
    crossOrigin: 'anonymous'
  });

  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();

  canvas.add(img);
});
canvas {
  border: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
1. Resize the image to make it smaller<br>
2. When it gets a bit smaller, the image disappears
<canvas id="c" width="400" height="400" class="c"></canvas>

1 Ответ

0 голосов
/ 24 октября 2018

Вы получаете проблему перекрестного происхождения, примените crossOrigin: 'anonymous' к объекту изображения во время загрузки, используя fabric.Image.fromURL.

DEMO 

var canvas = new fabric.Canvas('c');
var imageSrc = "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/pug.jpg";

fabric.Image.fromURL(imageSrc, function(img) {
  img.set({
    left: 10,
    scaleX: 0.52,
    scaleY: 0.52,
    top: 10
  });
  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();
  canvas.add(img);
}, {
  crossOrigin: 'anonymous'
});
canvas {
  border: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
...