Fabric.js apply filter to Image.fromURL

Question

I have a fabricjs canvas [v2.4] and i'm trying to add an image via url and then apply a filter (grayscale for example).

I've managed to add the image via url but i cant quite get the filter part right. I've followed some examples online but i always get the following error:

Uncaught TypeError: (intermediate value)(intermediate value).filter is not a function

Here's a short snipper of the code that involves the adding + filter while you can see the full fiddle attached below as well. The two lines of code that does that filtering is uncommented for now to not cause the error.

var img_url = "https://www.fariskassim.com/stage/rebel9/seongbukgu/mobile_browser_cam/v2/img/test.png"

// add image to fabriccanvas
function addImg_d() {

  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    //img.filters.push(new fabric.Image.filters.Grayscale());
    //img.applyFilters(d_canvas.renderAll.bind(d_canvas));
    img.scale(1);
    d_canvas.add(img);
  });
};

I've also tried different images / base64 data but i still get the exact same error. Any ideas ? Any help is appreciated. Thanks

// init fabric canvas
var d_canvas = new fabric.Canvas('d_canvas', {
  isDrawingMode: false,
  selection: false
});
d_canvas.enableGLFiltering = false;

// resize canvas on resize
window.addEventListener('resize', resizeCanvas_d, false);

function resizeCanvas_d() {
  d_canvas.setDimensions({
    width: 300,
    height: 200
  });
}

// resize on init
resizeCanvas_d();

// click to add image
var captureButton = document.getElementById('capture');
captureButton.addEventListener('click', () => {
  setTimeout(function() {
    addImg_d()
  }, 100);
});


var img_url = "https://www.fariskassim.com/stage/rebel9/seongbukgu/mobile_browser_cam/v2/img/test.png"

// add image to fabriccanvas
function addImg_d() {

  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    //img.filters.push(new fabric.Image.filters.Grayscale());
    //img.applyFilters(d_canvas.renderAll.bind(d_canvas));
    img.scale(1);
    d_canvas.add(img);
  });
};

html,
body {
  margin: 0;
  overflow: hidden;
}

#capture {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  padding: 10px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="d_canvas" style="border:1px solid #ccc"></canvas>

<button id="capture">Add</button>

Answer 1

Call img.applyFilters() no need to pass argument as you are setting filter.

DEMO

// init fabric canvas
var d_canvas = new fabric.Canvas('d_canvas', {
  isDrawingMode: false,
  selection: false
});
d_canvas.enableGLFiltering = false;

// resize canvas on resize
window.addEventListener('resize', resizeCanvas_d, false);

function resizeCanvas_d() {
  d_canvas.setDimensions({
    width: 800,
    height: 600
  });
}

// resize on init
resizeCanvas_d();

// click to add image
var captureButton = document.getElementById('capture');
captureButton.addEventListener('click', () => {
  setTimeout(function() {
    addImg_d()
  }, 100);
});


var img_url = "https://cdn.shopify.com/s/files/1/1061/1924/files/Eye_Roll_Emoji_large.png?v=1541768914"

// add image to fabriccanvas
function addImg_d() {
  fabric.Image.fromURL(img_url, function(img) {
    // uncomment the 2 lines below and you'll get an error
    img.filters.push(new fabric.Image.filters.Grayscale());
    img.applyFilters();
    img.scale(1);
    d_canvas.add(img);
  },{crossOrigin:'anonymous'});
};

html,
body {
  margin: 0;
  overflow: hidden;
}

#capture {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  padding: 10px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="d_canvas" style="border:1px solid #ccc"></canvas>

<button id="capture">Add</button>