如何调整画布大小并将调整大小的数据发送到数据库？

Question

我正在尝试使用新调整大小的数据覆盖用户数据库表行数据（更改宽度和高度）。

示例：

• 在我的在线编辑器中，我创建 1000x500 画布，添加对象，保存 -> 将此数据发送到数据库
• 将画布大小调整为 500x250，保存 -> 仍保存为 1000x500

所以我正在寻找一种在调整大小后更新数据库宽度/高度详细信息的方法。下面的代码不会更新数据库。

<canvas id="canvas" width="300" height="200" style="border:1px solid #000"></canvas>
    <P>
    <input type="text" value="" placholder="width" id="resize-width" >
      <button id="resize" class="btn btn-secondary">
Resize
</button>
    </P>



    $(document).on('click','#resize',function(e){
            e.preventDefault();
            var data = {};
            var m = canvas.toDataURL({format: "jpg"});
            data['thumb'] = m;
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            data['template_data'] = JSON.stringify(canvas.toJSON(properties_to_save));
            data['template_id'] = $('#template_id').val();
            data['campaign_id'] = $('#campaign_id').val();
            $('.ed_preloader ').show();
            $('.pg-preloader-wrap').css('display','flex');
            $.ajax({
                url: ajaxurl + 'editor/save_template',
                type: "POST",
                data: data,
                success: function(data){
                    var result = jQuery.parseJSON(data);
                    if(result.status){
                        if(admin !== true && result.access_level >= 2){
                            image_data = result.thumb;
                            setCookie('fb_thumb', result.thumb, 1);
                            setCookie('fb_size', result.size, 1);
                            $('.popup_hidden_btn').trigger('click');
                        }
                        $.toaster(result.msg, 'Success', 'success');
                        Unsaved = false;
                    }else{
                        $.toaster(result.msg, 'Error', 'error');
                    }
                    $('.pg-preloader-wrap').hide();
                }
            });
        });

 $('#resize').click(function(){
    GetCanvasAtResoution($('#resize-width').val());
    $('#resize-width').val("");
  });


function GetCanvasAtResoution(newWidth)
    {
        if (canvas.width != newWidth) {
            var scaleMultiplier = newWidth / canvas.width;
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                objects[i].left = objects[i].left * scaleMultiplier;
                objects[i].top = objects[i].top * scaleMultiplier;
                objects[i].setCoords();
            }
            var obj = canvas.backgroundImage;
            if(obj){
                obj.scaleX = obj.scaleX * scaleMultiplier;
                obj.scaleY = obj.scaleY * scaleMultiplier;
            }

            canvas.discardActiveObject();
            canvas.setWidth(canvas.getWidth() * scaleMultiplier);
            canvas.setHeight(canvas.getHeight() * scaleMultiplier);
            canvas.renderAll();
            canvas.calcOffset();
        }           
    }

$(document).on('click','#resize',function(e){
            e.preventDefault();
            var data = {};
            var m = canvas.toDataURL({format: "jpg"});
            data['thumb'] = m;
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            data['template_data'] = JSON.stringify(canvas.toJSON(properties_to_save));
            data['template_id'] = $('#template_id').val();
            data['campaign_id'] = $('#campaign_id').val();
            $('.ed_preloader ').show();
            $('.pg-preloader-wrap').css('display','flex');
            $.ajax({
                url: ajaxurl + 'editor/save_template',
                type: "POST",
                data: data,
                success: function(data){
                    var result = jQuery.parseJSON(data);
                    if(result.status){
                        if(admin !== true && result.access_level >= 2){
                            image_data = result.thumb;
                            setCookie('fb_thumb', result.thumb, 1);
                            setCookie('fb_size', result.size, 1);
                            $('.popup_hidden_btn').trigger('click');
                        }
                        $.toaster(result.msg, 'Success', 'success');
                        Unsaved = false;
                    }else{
                        $.toaster(result.msg, 'Error', 'error');
                    }
                    $('.pg-preloader-wrap').hide();
                }
            });
        });

Answer 1

问题似乎是您在将

canvas_width

和

canvas_height

发送到服务器之前没有使用新尺寸进行更新。

canvas_width

和

canvas_height

的值需要反映画布的新大小。现在，您似乎正在客户端调整画布的大小，但您没有更新这些变量以将新尺寸发送到服务器。

这是一种简化的方法，可确保在将数据对象发送到服务器之前将新维度包含在数据对象中：

1. 捕捉新尺寸：调整画布大小后，请确保 使用新尺寸更新

   canvas_width

   和

   canvas_height

   。

2. 更新数据对象：在AJAX调用之前，确保更新 尺寸包含在您发送到的

   data

   对象中 服务器。

您可以进行以下快速调整：

$('#resize').click(function(){
    var newWidth = parseInt($('#resize-width').val(), 10); // Assuming you have an input for new width
    var newHeight = // Calculate new height based on your needs or user input
    GetCanvasAtResoution(newWidth);
    
    // Now update the canvas_width and canvas_height variables before sending to server
    canvas_width = canvas.getWidth(); // New width after resizing
    canvas_height = canvas.getHeight(); // New height after resizing
    
    var data = {
        'thumb': canvas.toDataURL({format: "jpg"}),
        'template_data': JSON.stringify(canvas.toJSON(properties_to_save)),
        'template_id': $('#template_id').val(),
        'campaign_id': $('#campaign_id').val(),
        // Add new dimensions to the data being sent
        'width': canvas_width, 
        'height': canvas_height
    };

    // Your AJAX call remains the same, now including updated dimensions
    $.ajax({
        url: ajaxurl + 'editor/save_template',
        type: "POST",
        data: data,
        success: function(response){
            // Your success logic
        }
    });
});

确保在服务器端，您还处理 AJAX 调用中的这些新

width

和

height

字段以更新数据库记录。

此调整应确保您的数据库使用新维度进行更新。如有必要，只需将

// Calculate new height based on your needs or user input

替换为您的逻辑或输入字段即可获得新高度。快乐编码！