Javascript 如何使用fabric.js添加图像过滤器

我想能够添加图像过滤器的图像，用户上传本地。本地上传工作正常，但图像未转换为灰度。这是我的密码：

$("#file_input").change(function (e) {

    var URL = window.webkitURL || window.URL;
    var url = URL.createObjectURL(e.target.files[0]);
    img = new Image();      
    img.src = url;
    img.onload = function () {
        ctx = document.getElementById('myCanvas').getContext("2d");

    ///
     fabric.Image.fromURL( img.src, function( img ) {

  // add filter
  img.filters.push(new fabric.Image.filters.Grayscale());

  // apply filters and re-render canvas when done
  img.applyFilters(ctx.renderAll.bind(ctx));

  // add image onto canvas
  ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
});
    }

    ///
});

---

我不懂你的代码，但我想你想要这样的东西

$（“#文件_输入”）.change（函数（e）{
var URL=window.webkitURL | | window.URL；
var url=url.createObjectURL（e.target.files[0]）；
img=新图像（）；
img.src=url；
img.onload=函数（）{
var canvas=新织物画布（“c”）；
///
fabric.Image.fromURL（img.src，函数（img）{
//添加过滤器
push（newfabric.Image.filters.Grayscale（））；
//应用过滤器并在完成后重新渲染画布
img.applyFilters（canvas.renderAll.bind（canvas））；
//将图像添加到画布上
img.width=canvas.width；
img.height=canvas.height；
canvas.add（img）；
});
}
///
});