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

【问题标题】：fill extra area with custom color while cropping with Cropper.js使用 Cropper.js 裁剪时使用自定义颜色填充额外区域
【发布时间】：2016-08-30 20:31:44
【问题描述】：

我正在使用 Cropper.js 库在客户端获取裁剪坐标以及图像的宽度和高度，并在 laravel 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);

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

这会生成这张图片

我想把黑色改成白色。

【问题讨论】：

标签： javascript php image canvas crop

【解决方案1】：

您需要组合命令进行干预：

以正确的大小创建画布
用 fill() 填充颜色
使用 insert() 放置图像

所以你想要这样的东西（未经测试）

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

【讨论】：