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

Question

我正在使用Cropper.js库来获取作物坐标，宽度和高度是客户端的图像，而lalavel 4中的干预实际上是在服务器端使用corp数据进行处理。

JavaScript函数：

$('#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功能：

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

当裁剪区域超出图像时，此额外区域会自动填充黑色。我希望它用白色填充。

生成此图像

我想将黑色更改为白色。

Answer 1

您需要在干预中使用命令组合：

1. 以正确的尺寸创建画布
2. 使用fill（）
填充颜色
3. 使用insert（）放置图片

所以你这样的事情（没有经过测试）

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