如何调整Canvas尺寸并将新尺寸数据同步更新至数据库？

我的问题是：调整Canvas尺寸后，新的宽高数据无法覆盖数据库中的旧数据，具体场景：

• 在在线编辑器中创建1000x500的Canvas，添加对象后保存，数据成功存入数据库；
• 将Canvas调整为500x250后保存，数据库中仍保留1000x500的旧尺寸数据。

以下是无法实现更新的代码：

HTML部分 #

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

JavaScript部分 #

$('#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();
            }
        });
    });

问题原因分析 #

保存逻辑中存在关键错误：在调用canvas.toJSON()导出数据前，执行了canvas.width = canvas_width; canvas.height = canvas_height;，这会把Canvas的宽高强制重置为初始旧值（canvas_width和canvas_height应为创建时的尺寸），导致导出的template_data仍然是旧尺寸，自然无法更新数据库。

解决方案 #

1. 移除重置宽高的代码：删除保存逻辑中的canvas.width = canvas_width; canvas.height = canvas_height;，保留GetCanvasAtResoution调整后的真实尺寸。
2. 确保导出尺寸属性：检查properties_to_save数组，确认包含width和height，保证canvas.toJSON()能导出新的尺寸数据。
3. 后端验证：确认save_template接口正确解析template_data中的宽高字段，并更新数据库对应表的记录；如果后端依赖单独的宽高参数，可以在data中新增width和height字段，直接传递canvas.width和canvas.height。

修改后的保存逻辑代码示例 #

$(document).on('click','#resize',function(e){
        e.preventDefault();
        var data = {};
        var m = canvas.toDataURL({format: "jpg"});
        data['thumb'] = m;
        // 移除重置宽高的代码
        data['template_data'] = JSON.stringify(canvas.toJSON(properties_to_save));
        // 可选：如果后端需要单独的宽高参数，添加以下两行
        data['width'] = canvas.width;
        data['height'] = canvas.height;
        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();
            }
        });
    });

内容的提问来源于stack exchange，提问作者Andrius Morkunas