javascript - Fabricjs 让我只旋转和编辑第一个点击的图像

Question

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

这是我的代码：

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 开发的 adianti 框架。我只是检查图像路径是否返回正确的内容。我不知道我该如何解决这个问题。我寻找解决方案，但没有成功。

标签： javascriptphpjqueryfabricjs