php using imagejpeg() with file_put_contents()

Question

I am using file_put_contents() to store images in the directory. However, the image size is too large. I want to compress the image size from mb to kb for the betterment of my web application. However, I am not sure if I can use imagejpeg() function along with file_put_contents() or not. Just to inform, I am using Croppie.js and image is being transfered via AJAX to a separate file for processing.

PHP

$image_array_1 = explode(";", $image);
$image_array_2 = explode(",", $image_array_1[1]);
$image = base64_decode($image_array_2[1]);
$imageName = $user['id'][0] . "_" . time() . '.jpg';
$dir = "../images/users/".$user['id'][0]."/"."avatar/";
$imageDirectory = $dir.$imageName;

If I upload an image of 1 mb in size, it becomes 6-7 mb in size. Instead of reducing it multiplies the size by 6-7 times. I want it to get reduced below 50-100 kb. Is there any way I can compress the size here?

Take a look here for how to downsize an image with PHP: https://stackoverflow.com/questions/14649645/resize-image-in-php — cOle2, May 26 '21 at 17:32
"If I upload an image of 1 mb in size, it becomes 6-7 mb in size." This makes no sense. Files do not "become" bigger unless you make them so. — miken32, May 26 '21 at 17:43
@miken32 I know that but please tell me where in the code above can you see that I "forced" it to become bigger in size? I don't care if that makes sense or not. It's what happening here. I have tested all rounds. Checked before and after size of uploaded image and said what I found as a result. Anyways, do you have a solution to my question? — Mr. Crypto, May 26 '21 at 18:08
The image size increasing might be due to `Croppie.js`. See here https://github.com/Foliotek/Croppie/issues/287 — cOle2, May 26 '21 at 18:31
@cOle2 right.. I know that.. So I wanted to compress it during server side processing and reduce it's size. The compressing solutions I found was according to the direct PHP upload that uses `$_FILES` method. However, here I am uploading using AJAX and the method of processing is different than usual. Any solution for that relevant to my code in the question? — Mr. Crypto, May 26 '21 at 19:00
Thanks everyone! I found the solution myself and posted it as an answer below. However, I don't think that my question was so irrelevant or badly architectured to receive a downvote. I don't know why people with enough reputation with the power to downvote sometimes just misuse it. I hope the person corrects his/her mistake. Thanks again :) — Mr. Crypto, May 27 '21 at 16:06

Mr. Crypto · Accepted Answer · 2021-05-29T08:00:37.227

I found the solution myself. I am posting here for someone who comes searching for it in the future. If you are using Croppie.js and your file size is too large the first thing you need to do is to set your image format to format: "jpeg". JPEG uses a compression technology itself compared to PNG files resulting in low sizes files without doing anything. Now if you want better quality set your size: "original" and quality: 1. Basically your Croppie settings should look like this:

resize.croppie('result', {
  type: "canvas",
  size: "original",
  format: "jpeg",
  quality: 1
})

Now, with this setting the file size should be less compared to PNG but still would be large enough to indicate a red flag for a web app. Therefore, the solution is compressing the image using PHP during upload. Now here I had to face a challenge. All the examples I found on internet was given using $_FILES method that is normally used while uploading images. However, as you can see in my question above the PHP coding was different. Therefore, I had to find a way to overcome this problem as no relevant example was given on the web considering uploads using Croppie.js. Therefore, I went on to figure out the things myself using the trial and error method and was able to replicate the solution commonly used with $_FILES method for image compression. I wrote my own function for it. However, the function below only contains the solution for JPEG image type. If you want it for any other format please feel free to use my function as an example and modify it accordingly.

function compressImage($image, $imageDirectory, $quality) {
  return imagejpeg(imagecreatefromstring($image), $imageDirectory, $quality);
}

$image_array_1 = explode(";", $image);
$image_array_2 = explode(",", $image_array_1[1]);
$image = base64_decode($image_array_2[1]);
$imageName = $user['id'][0] . "_" . time() . '.jpg';

if(!file_exists("../images/users/".$user['id'][0]."/"."avatar/")) {
  $dir = mkdir("../images/users/".$user['id'][0]."/"."avatar/", 0777, true);
}else{
  $dir = "../images/users/".$user['id'][0]."/"."avatar/";
}

$imageDirectory = $dir.$imageName;
compressImage($image, $imageDirectory, 50);

Enjoy!

php using imagejpeg() with file_put_contents()

1 Answers1