How can i resize canva and send resized data to database?

Question

I am trying to overwrite users database table row data with new resized data(Change width and height).

example:

• in my online editor i create 1000x500 canva, add objects, save -> Sends this data to db
• resize canva to 500x250, save -> Saves as 1000x500 still

So i am looking for a way to update database width/height details after resize. Code below doesnt update db.

<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

The issue seems to be that you're not updating canvas_width and canvas_height with the new dimensions before sending them to the server. The values of canvas_width and canvas_height need to reflect the new size of the canvas. Right now, it looks like you're resizing the canvas on the client side, but you're not updating these variables to send the new dimensions to the server.

Here’s a simplified approach to ensure the new dimensions are included in your data object before sending it to your server:

1. Capture the New Dimensions: After resizing the canvas, make sure to update canvas_width and canvas_height with the new dimensions.

2. Update the data Object: Before the AJAX call, ensure the updated dimensions are included in the data object you're sending to the server.

Here's a quick adjustment you can make:

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

Make sure on the server-side, you’re also handling these new width and height fields from your AJAX call to update the database records.

This tweak should ensure your database gets updated with the new dimensions. Just replace the // Calculate new height based on your needs or user input with your logic or input field for new height if necessary. Happy coding!