javascript - 使用 Cropper.js 裁剪时使用自定义颜色填充额外区域

Question

我正在使用 Cropper.js 库在客户端获取图像的裁剪坐标以及宽度和高度，并在 Laravel 4 中进行干预，以将其与公司数据实际合并到服务器端。

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. 创建正确尺寸的 Canvas
2. 使用 fill() 填充颜色
3. 使用 insert() 放置图像

所以你会这样(未经测试)

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