fill extra area with custom color while cropping with Cropper.js
<p>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. </p>

<p>JavaScript function:</p>

<pre class="lang-js prettyprint-override"><code>$('#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);
            }
        });
</code></pre>

<p>PHP/Laravel Function:</p>

<pre><code>$img-&gt;crop($width, $height, $x, $y);
</code></pre>

<p>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.</p>

<p><a href="https://i.stack.imgur.com/Rnq8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rnq8j.png" alt="Image cropping with area out of Image"></a></p>

<p>This generates this image </p>

<p><a href="https://i.stack.imgur.com/J5tXd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J5tXd.png" alt="The Image Generated from the above cropping"></a></p>

<p>I want to change the black color to white.</p>