Fabricjs only lets me rotate and edit only the first image clicked

Question

I have developed a code that implements canvas, caman and fabricjs. The code aims to rotate image, edit color and save it when I click on a button. It works well, but only with the first image. When I click the edit button again to display another image, the screen shows the image, but does not allow me to edit it. In other words, if I click on the image, then the first clicked image appears again for editing. I ran the Alert command to see which path the image file returned.

Below an excerpt from my code

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();
    });
");

I run this code to do image editing. I use the adianti framework developed by Pablo Dall'Oglio. I checked which way the image was returning. I already googled and found no solution for this.

Answer 1

You are substituting within Tscript::create(), which is an abstraction of the script tag. So, to work and make PHP pass the "id" to your frontend JS, try assigning the value within a JS variable:

TScript::create("var id_imagem = " . $id .";");

Or something similar, and start reading it from your initial tscript:

TScript::create("
temp_img_id = id_image; ...

If in doubt consult the link below:

Pass PHP variables to Javascript