Question 231704 in PHP Question posted in
Official manual can be found here.

Php – Issue: Images are loading too slow

I made a craiglist type site using Html,Css,Js,Php.
When the user clicks to upload a pic that is too large(1mb+) the page goes too slow or fails(503 error). There are no issues with small pics(100kb).

  1. A php page has a form on it with a type=file input tag and a preview img tag. > no issues here.
  2. When the user clicks the submit button, the form passes the input tag value to another php page where the Upload code to the server is.

Q: What is the best way to resize a pic before Uploading to the server?
Compared to Craigslist, my site is super slow uploading pics or fails.
How can I make this go faster?

https://www.mimarketa.com/mmMain/mmEnglish/mmPostAd.php?country=US&county=Lewis&state=WA&adCity=All_Cities&category=ALL

I tried searching for an answer here & google.

PHP page1: Input file tag & image preview tag. And JS resizes via draw method.

CODE PHP page2:

  $upload_dir = "mmAdPics/";
    $file1 = $upload_dir . rand()  . ".png";
    $picUrl1='https://www.mimarketa.com/mmMain/mmEnglish/'.$file1;        
    $img1 = $_POST['hidden_data1'];
    $img1 = str_replace('data:image/png;base64,', '', $img1);
    $img1 = str_replace(' ', '+', $img1);
    $data1 = base64_decode($img1);
    $success = file_put_contents($file1, $data1);
    print $success ? $file1 : 'Unable to save the file1.';
Tags:

2

Answers


  1. 0

    Look into this: https://www.php.net/manual/en/book.imagick.php

    Specifically resizing the image. Also the 503 is likely due to your server timing out. You can either increase that value on the server side or limit the file size to upload on the client side.

    Login or Signup to reply.
  2. 0

    You are using regular POST data to transfer the image content which is wrong and i believe is the cause of the server hiccups, the file content transfer is handled specially (multipart data), have its own settings like max file size etc. files are automatically uploaded to temporary file, which is then obtained via superglobal $_FILES and then manipulated to final destination, that is the regular way.

    Resizing the image can be done on server or client side, if you use the regular way then there is no problem to do it on server side, but why using server resources when you can use client resources, besides that users can interact with that, like cutting just part of image or cropping etc. That is not as trivial as it seems, there are many libraries for this specific task e.g. imagerjs.

    Resizing is relatively easy to do and you seem to already have some code to do that, but you are using canvas.toDataURL instead canvas.toBlob which affects which way the file data is handled in FormData object, first use regular data like textarea filled with base64 encoded data url string and server don’t expect such huge data in this field, the second use special file content transfer mentioned earlier, as bonus you will not need to do str_replace anymore which is expensive (resource-wise) on big data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search