使用Cropper.js进行裁剪时，使用自定义颜色填充额外区域

Question

I am using Cropper.js library to get crop coordinates and width and height an image at client side and Intervention in laravel 4 to actually corp it in server side with the corp data.

JavaScript function:

$('#image').cropper({
            aspectRatio: 16 / 9,
            crop: function (e) {
                // To send cop data to server
                x = e.x;
                y = e.y;
                width = e.width;
                height = e.height;
                rotate = e.rotate;
                scaleX = e.scaleX;
                scaleY = e.scaleY;
                $('#x').val(x);
                $('#y').val(y);
                $('#width').val(width);
                $('#height').val(height);
                $('#rotate').val(rotate);
                $('#scaleX').val(scaleX);
                $('#scaleY').val(scaleY);
            }
        });

PHP/Laravel Function:

$img->crop($width, $height, $x, $y);

When cropped area out of image, this extra area is auto filled with black color. I want it to be filled with white color instead.

This generates this image

I want to change the black color to white.

Answer 1

You'll need a combination of commands in intervention:

1. Create canvas at the correct size
2. Fill it with a colour with fill()
3. use insert() to place your image

So you'd something like this (not tested)

$destination = Image::canvas($width, $height);
$destination->fill('#ffffff');
$destination->insert($img, $x, $y);