Resize Filter Bug

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.min.js"></script>
<button id="to-json">To JSON
</button>
<button id="load-json">Load JSON
</button>
<canvas id="c" width="400" height="400" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');
var json;

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.filters.push(new fabric.Image.filters.Grayscale());
  img.applyFilters();
  img.resizeFilter = new fabric.Image.filters.Resize({resizeType: 'hermite'});
  img.applyResizeFilters();
  
  canvas.add(img);
  
  }, {
    crossOrigin: 'anonymous'
});

$("#to-json").on('click', function() {
	json = JSON.stringify(canvas);
});

$("#load-json").on('click', function() {
	canvas.clear();
  console.log(json);
  canvas.loadFromJSON(json, function() {
      canvas.renderAll();
  });     
});