Resize Filter Bug

by Steve Eberhardt

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://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9jXGYtvV0gDWqyZIc-%2F-LNu_TN1FjMCmA_viUv1%2F-LNub2Y_k9L1Abt11dxs%2FScreen%20Shot%202018-10-03%20at%2017.45.55.png?alt=media&token=f90eac6c-515a-4443-b448-5831bd90ce01";

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: 'lanczos'});
  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();
  });     
});