javascript - 如何使用 Fabric.js 添加图像滤镜

Question

我希望能够将图像过滤器添加到用户本地上传的图像中。本地上传工作正常，但图像未转换为灰度。这是我的代码:

$("#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);
});
    }

    ///
});

Answer 1

我不明白你的代码。但我认为你想要这样的东西..

$("#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 () {
        var canvas = new fabric.Canvas("c");

    ///
     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(canvas.renderAll.bind(canvas));

  // add image onto canvas
  img.width = canvas.width;
  img.height = canvas.height;
  canvas.add(img);
});
    }

    ///
});

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


<input type="file" id="file_input"/>
<canvas id="c"></canvas>