Question

我编写了实现canvas，caman和fabricjs的代码。当我单击一个按钮时，这应该可以旋转，编辑颜色并保存图像。它工作正常，但仅适用于第一个单击的图像。当我再次单击该按钮以显示另一张要编辑的图像时，屏幕上将显示该图像，但不允许我对其进行编辑。换句话说，如果我单击图像，则单击的第一个图像将再次显示以进行编辑。我调用命令警报以查看图像返回的路径，并且该路径正确返回。

这是我的代码：

TScript::create("
    temp_img_id = '{$id}';
    temp_img = '{$filename->path_filename}';

    var canvas = this.__canvas = new fabric.Canvas('imgFilePreview');
    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

    canvas.setHeight(500);
    canvas.setWidth(500);

    fabric.Image.fromURL(temp_img, function(objects){
        var obj = objects.scale(0.75);
        obj.scaleToHeight(350);
        obj.scaleToWidth(350);
        canvas.centerObject(obj);
        canvas.add(obj);

        $('.canvas-container').css({
            'width': '900px',
            'height': '900px',
            'position': 'relative',
            'user-select': 'none'
        });
        $('#canvas').css({
            'border': '1px solid rgb(204, 204, 204)',
            'width': '500px',
            'height': '500px',
            'left': '0px',
            'top': '0px', 
            'touch-action': 'manipulation',
            'user-select': 'none'
        });
        $('.upper-canvas').css({
            'border': '1px solid rgb(204, 204, 204)',
            'width': '500px',
            'height': '500px',
            'left': '0px',
            'top': '0px',
            'touch-action': 'manipulation',
            'user-select': 'none',
            'cursor': 'default'
        });

        $('#canvas').attr({'width': '500', 'height': '500'});
        $('.upper-canvas').attr({'width': '500', 'height': '500'});
        canvas.renderAll();
    });
");

我运行以下代码来执行图像编辑。我使用Pablo Dall'Oglio开发的aadianti框架。我只是检查图像路径是否返回了正确的内容。我不知道该如何解决。我在寻找解决方案，但没有成功。

Fabricjs让我仅旋转和编辑第一个单击的图像

0 个答案: