So fügen Sie Bildfilter mit fabric.js hinzu

Question

Ich möchte in der Lage sein, Bildfilter zu einem Bild hinzuzufügen, das der Benutzer lokal hochlädt. Der lokale Upload funktioniert einwandfrei, aber das Bild wird nicht in Graustufen konvertiert. Hier ist mein Code:

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

Ich verstehe nicht, Ihre code.but Ich glaube, Sie so etwas wie dies wollen ..

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