How to add white background and paste only the cropped part on top of that ?

[vikaschauhan17]

Hi,

Suppose I have a input image of width=500px ,height=500px and I want to crop a portion where width is 200px , height is 200px. Now after crop I am getting the output document of height 200px and width 200px. Is it possible to get the cropped document size same as of that of original document size, which is, 500X500 with cropped content on 200X200 area and rest should be white background. ? That way cropped output document will not be stretched.

Any pointer will be of great help.

[vikaschauhan17]

I have images with white background and I want cropped document also to have the white background and should have size equal to that of original document.

[fengyuanchen]

After get the cropped image with size of 200x200px from Cropper, just draw it into the center of a new <canvas> element with the size of 500x500px.

[vikaschauhan17]

Thank you for the response. May I know how to do this- "just draw it into the center of a new element with the size of 500x500px." What is the syntax for the same ? Sudo code will work.

Thanks

[fengyuanchen]

const cropper = new Cropper(targetImage, {
  ready() {
    const croppedCanvas = cropper.getCroppedCanvas();
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    canvas.width = 500;
    canvas.height = 500;
    context.fillStyle = 'white';
    context.drawImage(croppedCanvas, 125, 125);
    canvas.toDataURL();
  },
});

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

[vikaschauhan17]

Thank you for your time. Below is my code and I am still not able to draw it into the new element. It is saving only the cropped area. Could you please have a look at my code and let me what I am missing here ?

                var cropcanvas = $('#'+imageName).cropper('getCroppedCanvas');
                var croppng = cropcanvas.toDataURL("image/png");
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = 1000;
                canvas.height = 1000;
                context.fillStyle = 'white';
                context.drawImage(cropcanvas, 125, 125);
                var abc = canvas.toDataURL("image/png");
                payload.croppedImg = abc;

[vikaschauhan17]

Hey, could you please let me know what am I missing here. ?

[vikaschauhan17]

I have tried this as well, But it is not working. Could you please tell me what I am missing here. ?

var cropcanvas = $('#'+imageName).cropper('getCroppedCanvas'); var croppng = cropcanvas.toDataURL("image/png"); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 1000; canvas.height = 1000; var image = new Image(); image.onload = function() { context.fillStyle = 'white'; context.drawImage(image, 200, 200); }; image.src = croppng; payload.croppedImg = image.src;