2015-04-09 3 views
0

У меня есть фоновое изображение холста, которое я фильтрую до серого. Когда я сохраняю холст как JSON, я хочу, чтобы фильтр изображения фона удалялся. Почему, когда я переписываю фон холста с помощью его метода setter, отфильтрованный фон остается в JSON?Почему старый фон не перезаписывается?

Применение фильтрации на фон

fabric.Image.fromURL(image_library_selected_url, (function(image){ 
    image.filters[0] = grayscale; 
    image.applyFilters((function(){ 
     this.canvas.backgroundImage = image.getElement(); 
     canvas.backgroundImage.name = image_library_selected_url; 
     this.canvas.renderAll(); 
    }).bind(this)); 
}).bind(this)); 

Удаление фильтрации и преобразование холста JSON

//canvas.backgroundImage.name holds the src of the original image 
var bg_img = canvas.backgroundImage.name; 
canvas.setBackgroundImage(bg_img, canvas.renderAll.bind(canvas)); 

canvas.forEachObject(function(obj) { 
    if (obj.type === 'named-image') { 
     obj.filters=[]; 
     obj.applyFilters(canvas.renderAll.bind(canvas)); 
    } 
}); 

canvas.deactivateAll().renderAll(); 
var data = JSON.stringify(canvas); 

На данный момент данные погас в базу данных и nonfiltered фонового изображения остается на экране. ..

Когда я обновляю страницу, сохраненные данные перезагружаются на страницу, за исключением того, что фильтр (только фона) остается. Если я полностью очищаю фон:

canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)) 

Фоновые данные стираются, как ожидалось, и никогда не сохраняются.

Если я сделать:

//canvas.backgroundImage.name holds the src of the original image 
var bg_img = canvas.backgroundImage.name; 
canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)); 
canvas.setBackgroundImage(bg_img, canvas.renderAll.bind(canvas)); 

Визуально фон представляется правильным, но без фона данные не сохраняются

ответ

0

Оказывается, нефильтрованный фон не был загрузки достаточно быстро и перезвонить не было сделано в время.

//canvas.backgroundImage.name holds the src of the original image 
var bg_img = canvas.backgroundImage.name; 
canvas.setBackgroundImage(bg_img, function() { 
    canvas.renderAll(); 

    ...other processing 

    var data = JSON.stringify(canvas); 

    ...process json data 
});