Filtr javascript fabricjs nie zwraca przefiltrowanego płótna do adresu URL:

Question

export function filter(url) { 
    var c = document.createElement('canvas') 
    c.id = "canvas_greyscale" 
    var canvas = new fabric.Canvas('canvas_greyscale') 
    fabric.Image.fromURL(url, function(oImg) { 
     c.height = oImg.height 
     c.width = oImg.width 
     oImg.filters.push(new fabric.Image.filters.Grayscale()) 
     oImg.applyFilters(canvas.renderAll.bind(canvas)) 
     canvas.add(oImg) 
     var img = canvas.toDataURL('image/png') 
     console.log(img) 
     return img 
    }, {crossOrigin: "Anonymous"}) 
} 

Tutaj moje płótno jest renderowane z filtrem skali szarości. Nie ma problemu, ale kiedy próbuję przekonwertować płótno na URL, daje mi to płótno bez filtra.

Nie wiem, co jest złego w tutaj ..

Co robię źle. Chcę przekształcić płótna, które mają filtr URL

var img = canvas.toDataURL('image/png') daje mi obraz bez filtra

Potrzebujesz pomocy

Answer 1

applyFilters jest asynchroniczna (dlatego mijamy renderAll zwrotnego w nim).
Musisz wywołać funkcjęDataURL w wywołaniu zwrotnym, w przeciwnym razie eksportujesz płótno przed zastosowaniem filtru.

Tutaj jest szorstka dostosowanie kodu:

function filter(url, callback) { 
 
    var c = document.createElement('canvas'); 
 
    c.id = "canvas_greyscale"; 
 
    var canvas = new fabric.Canvas('canvas_greyscale'); 
 
    // the applyFilters' callback 
 
    var onend = function() { 
 
    canvas.renderAll(); 
 
    var img = canvas.toDataURL('image/png'); 
 
    callback(img); 
 
    } 
 

 
    fabric.Image.fromURL(url, function(oImg) { 
 
    canvas.setDimensions({width:oImg.width, height:oImg.height}); 
 

 
    oImg.filters.push(new fabric.Image.filters.Grayscale()) 
 
    // here we pass the export function 
 
    oImg.applyFilters(onend) 
 
    
 
    canvas.add(oImg) 
 
    }, { 
 
    crossOrigin: "Anonymous" 
 
    }) 
 
} 
 

 
var url = 'https://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg' 
 
filter(url, function(dataURI) { 
 
    output.src = dataURI; 
 
    original.src = url 
 
})

img{ width: 50%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script> 
 
<img id="output"><br> 
 
original Image: © Andrew Dunn CC-By-SA 2.0 <br> 
 
<img id="original">