fabric.js kullanılarak görüntü filtreleri nasıl eklenir

Question

Kullanıcı filtrelerini yerel olarak karşıya yükledikleri bir resme ekleyebilmek istiyorum. Yerel yükleme iyi çalışıyor ancak görüntü gri tonlamaya dönüştürülmez. İşte benim kodudur: i böyle bir şey istediğini düşünüyorum senin code.but anlamıyorum

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