заполнить дополнительную область собственным цветом при обрезке с помощью Cropper.js

Я использую библиотеку 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);

Когда обрезанная область выходит за пределы изображения, эта дополнительная область автоматически заполняется черным цветом. Вместо этого я хочу, чтобы он был заполнен белым цветом.

Обрезка изображения за пределами изображения

Это генерирует это изображение

Изображение, сгенерированное из вышеуказанной обрезки

Я хочу изменить черный цвет на белый.


javascript canvas image php crop
person Bob.B    schedule 05.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам понадобится комбинация команд для вмешательства:

  1. Создайте холст нужного размера
  2. Залейте его цветом с помощью fill()
  3. используйте insert() для размещения изображения

Итак, вы бы сделали что-то вроде этого (не проверено)

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