Images uploaded via Ajax ignores transparency for rectangle bacground

[izidorit]

Hello Everyone,

My laravel function with intervention image worked perfectly with simple synchronous POST uploads in laravel like this: $SingleImage = $request->file($fieldname); \Image::make($SingleImage)->resize(null, 32, function ($c) { $c->aspectRatio();}) ->crop(32, 32) ->rectangle(0, 0, 31, 31, function ($draw) { $draw->background('rgba(255, 255, 255, 0)'); $draw->border(4, '#FCE808'); }) ->encode('jpg', 80)->save('storage/img/' . $ImageName . '-map.jpg');

It created a mini image of users with a yellow border, so they look nice when placing users on the google map. But I wanted to let users to upload cropped profile images, which is done by cropper.js. It uploads the image nicely, but I receive an image with yellow borders and white background, so the image behind it is hidden. I tried to use a bigger image with the same 32*32 rectangle, so I saw the big image nicely withe the square on the top left corner with the white background, like a stain. I don't know what to do, it's clearly has some issues with the image it receives, since it arrives not as a laravel file object but a base64 coded text: $image = $request->image; $image_array_1 = explode(";", $image); $image_array_2 = explode(",", $image_array_1[1]); $RequestFile = base64_decode($image_array_2[1]);

\Image::make($RequestFile)->resize(null, 32, function ($c) { $c->aspectRatio();}) ->crop(32, 32) ->rectangle(0, 0, 31, 31, function ($draw) { $draw->background('rgba(255, 255, 255, 0)'); $draw->border(4, '#FCE808'); }) ->encode('jpg', 80)->save('storage/img/' . $ImageName . '-map.jpg');

I hope you can tell me, what is wrong with this whole concept, or with the rectangle feature.

I tried to save it as PNG, since JPG doesn't support transparent layers, but didn't help, first is when the rectangle is created before the resize, second one is the "normal" happening.