如何使用 onload 函数在画布中获取动态数据

Question

所以，我只是在数据库中添加了一些多个数据，以使用我创建的画布。

我的问题是如何使用我在添加按钮上创建的 onload 函数显示保存的数据。 请帮助我使用 onload 函数显示数据。此外，如何在此给定代码中设置多个图像意味着第一张图像是画布，其他图像用于画布，如徽标等其他图像..

听我的密码

    var id = $('#hdnID').val();
    // var cat_hdn_id = $('#cat_hdn_id').val();
    $.ajax({
        url: BaseURL + 'admin/template/getData',
        type: 'GET',
        data: { id: id },
        dataType: "json",
        success: function (response) {
            // var json = JSON.parse(response);
            console.log(response);
            img = new Image();
            img.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;

                canvas.setWidth(imgWidth);
                canvas.setHeight(imgHeight);
                canvas.remove(textbox);
                // Initiate a textbox object
                textbox = new fabric.Textbox("Name", {
                    fontSize: fontSize,
                    fontFamily: fontFamily,
                    fill: fontColor,
                    type: tempName,
                    width: 200,
                    top: top,
                    left: left,
                    editable: true
                });

                canvas.add(textbox);

                fabric.Image.fromURL(imagePath, imgObj => {
                    bgImg = canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas), {

                    });
                    imgObj.scaleToWidth(canvas.width);
                    imgObj.scaleToHeight(canvas.height);
                    canvas.backgroundImage.strech = true;
                    canvas.renderAll();
                });
            };
            img.src = imagePath;
        },
        error: function (xhr, status, error) {
            alert('Error fetching canvas data:', error);
        }
    });
    // var imagePath = $('.imgNameFill').val();
    // var left = parseFloat($('#left').val());
    // var top = parseFloat($('#top').val());
    // var fontFamily = $('#fontFamily').val();
    // var fontSize = parseFloat($('#fontSize').val());
    // var fontColor = $('#fontColor').val();
    // var tempName = $('#temp_name').val();
    // var file, img, imgWidth, imgHeight;
    // img = new Image();
    // img.onload = function () {
    //     imgWidth = this.width;
    //     imgHeight = this.height;

    //     canvas.setWidth(imgWidth);
    //     canvas.setHeight(imgHeight);
    //     canvas.remove(textbox);
    //     // Initiate a textbox object
    //     textbox = new fabric.Textbox("Name", {
    //         fontSize: fontSize,
    //         fontFamily: fontFamily,
    //         fill: fontColor,
    //         type: tempName,
    //         width: 200,
    //         top: top,
    //         left: left,
    //         editable: true
    //     });
    //     canvas.add(textbox);

    //     fabric.Image.fromURL(imagePath, imgObj => {
    //         bgImg = canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas), {

    //         });
    //         imgObj.scaleToWidth(canvas.width);
    //         imgObj.scaleToHeight(canvas.height);
    //         canvas.backgroundImage.strech = true;
    //         canvas.renderAll();
    //     });
    // };
    // img.src = imagePath;

} ```

I Want to show the excet data which i save in canvas 
My json data is 

{"id":"37","category_id":"3","template_img":"http:\/\/localhost\/template-hub\/uploads\/temp\/ss.png","preview_img":"","temp_name":"{\"0\":{\"type\":\"image\",\"originX\":177.91,\"originY\"} etc.......


Thanks...