Question

我有一个画布背景图片，我正在过滤到灰度。当我将画布保存为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);

此时数据将移至数据库，屏幕上仍会显示未过滤的背景图像......

当我刷新页面时，保存的数据会重新加载到页面中，但过滤器（仅限背景）仍然存在。如果我完全清除背景：

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));

视觉上背景似乎正确但没有保存背景数据

Answer 1

原来未经过滤的背景加载速度不够快，并且没有及时回拨。

//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
});

为什么旧的背景不会被覆盖？

1 个答案: