title: how to resize image and reorient it if it rotates when uploaded through IOS devices using image intervention package?
body: <p>I have developed a Laravel web application with the help of some tutorial videos and codes given by other developers on stackoverflow .The app is working pretty good except for the image upload feature. I am facing an issue related to the uploaded image being cut either on the sides or on the bottom as well as the image when uploaded through any IOS device then the image under goes rotation. I have installed image intervention but i don't know where to put the code inside my files i am sharing my controller code as well as the image displaying  code here
  controller code  </p>
  
  <pre><code>namespace App\Http\Controllers;
  use Auth;
  use Illuminate\Http\Request;
  use Illuminate\Support\Facades\Validator;
  use Illuminate\Support\Facades\Hash;
  use Illuminate\Support\MessageBag;
  use App\comment;
  use App\User;
  use App\post;
  use View;
  use Lang;
  use image;
  class usersController extends Controller
  {
      private $u;
  
      public function __construct(){
          $this-&gt;u = new User();
      }
      public function search(Request $request){
          $search_input = $request["input"];
          $path = $request["path"];
          $users = User::where("name","like","%$search_input%")-&gt;orWhere("username","like","%$search_input%")-&gt;get();
  
          if ($users-&gt;isEmpty()) {
              return "&lt;p style='text-align: center;width: 100%;color: gray;font-size: 12px;margin: 3px'&gt;".Lang::get('trans.nothingToShow')."&lt;/p&gt;";
          }else{
              foreach ($users as $user) {
                  if ($user-&gt;verify == 1) {
                      $ifVerify = '&lt;span class="verify-badge" style="width: 420px; height: 700px; background:  url(\''.$path.'/imgs/verify.png\') no-repeat; background-size: cover; margin: 0px 2px;"&gt;&lt;/span&gt;';
                  }else{
                      $ifVerify = '';
                  }
                  if($user-&gt;avatar == "avatar.png"){
                      $avatar_path = '/imgs/avatar.png';
                  }else{
                      $avatar_path = '/storage/avatar/'.$user-&gt;avatar;
                  }
                  echo '&lt;div class="navbar-search-item"&gt;
                      &lt;a href="'.$path.'/'.$user-&gt;username.'"&gt;
                          &lt;div&gt;
                              &lt;div style="background-image:url(\''.$path.$avatar_path.'\');"&gt;
                              &lt;/div&gt;
                              &lt;p&gt;
                                  '.$user-&gt;name.$ifVerify.'&lt;br&gt;
                                  &lt;span&gt;@'.$user-&gt;username.'&lt;/span&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;';
              }
          }
      }
      public function profile($username){
          $user_info = User::where("username",$username)-&gt;get();
          foreach ($user_info as $uinfo) {
              $user_id = $uinfo-&gt;uid;
          }
          if (isset($user_id)) {
              $feedbacks = post::where("to_id",$user_id)-&gt;where("privacy",1)-&gt;orderBy('time', 'desc')-&gt;get();
              $feedbacks_count = post::where("to_id",$user_id)-&gt;get()-&gt;count();
              $new_count = post::where("to_id",$user_id)-&gt;where('read',0)-&gt;get()-&gt;count();
              // check comments on post (count)
              $commentsCount = array();
              foreach ($feedbacks as $fb) {
                  $pid = $fb-&gt;pid;
                  $countComments = comment::where("c_pid",$pid)-&gt;get()-&gt;count();
                  array_push($commentsCount,$countComments);
              }
              return view("pages.profile")-&gt;with(["user_info" =&gt; $user_info,"feedbacks" =&gt; $feedbacks,'feedbacks_count' =&gt; $feedbacks_count,'new_count' =&gt; $new_count,'commentsCount' =&gt; $commentsCount]);
          }else{
              return view("pages.profile")-&gt;with(["user_info" =&gt; $user_info]);
          }
      }
      public function settings($username){
          $user_info = User::where("username",$username)-&gt;get();
          if (Auth::user()-&gt;username == $username) {
              return view("pages.settings")-&gt;with("user_info",$user_info);
          }else{
              return redirect()-&gt;back();
          }
  
      }
      public function s_general(Request $request){
          $this-&gt;validate($request,[
              'avatar' =&gt; 'nullable|image|mimes:jpeg,png,jpg|max:3072',
              'fullname' =&gt; 'required',
              'email' =&gt; 'required|email'
          ]);
          if ($request['fullname'] == Auth::user()-&gt;name &amp;&amp; $request['email'] == Auth::user()-&gt;email &amp;&amp; !$request-&gt;hasFile('avatar')) {
              return redirect()-&gt;back()-&gt;with('general_msg', Lang::get('trans.noChanges_MSG'));
          }else{
              $avatar = $request-&gt;file('avatar');
              if ($request-&gt;hasFile('avatar')) {
                  $avatar_ext = $avatar-&gt;getClientOriginalExtension();
                  $avatar_name = rand(9,999999999)+time().".".$avatar_ext;
                  $avatar_new = $avatar-&gt;storeAs("avatar",$avatar_name);
              }else{
                  $avatar_name = Auth::user()-&gt;avatar;
              }
              $update_general = User::where('uid',Auth::user()-&gt;uid)-&gt;update(['name' =&gt; $request['fullname'],'email' =&gt; $request['email'],'avatar' =&gt; $avatar_name]);
              return redirect()-&gt;back()-&gt;with('general_msg', Lang::get('trans.changes_saved'));
          }
  
      }
  </code></pre>
  
  <p>and this is how i display the image
      <code>
   &lt;div class="profile-avatar" style="width: 300px;height:400px; border-radius: 0%;background-image: url('@if(Auth::user()-&gt;avatar == "avatar.png") {{ url("/imgs/".Auth::user()-&gt;avatar) }} @else {{ url("/storage/avatar/".Auth::user()-&gt;avatar) }} @endif');"&gt;</code></p>
  
  <p>please help me with code should i put and where i should put that in order to resolve this issue</p>
  
  <p>this code is for preview of the image</p>
  
  <pre><code>  &lt;div style="display: inline-flex;"&gt;
      &lt;div class="profile-avatar" id="settings_img_elm" style="margin: 10px; width:350px;margin-top: 0; margin-bottom: 0;border-color: #fff; text-align: center;background-image: url('@if(Auth::user()-&gt;avatar == "avatar.png") {{ url("/imgs/".Auth::user()-&gt;avatar) }} @else {{ url("/storage/avatar/".Auth::user()-&gt;avatar) }} @endif');"&gt;
    &lt;/div&gt;
    &lt;p style="color: #a7aab5; font-size: 9px;padding: 25px 10px 25px 10px; margin: 0;"&gt;@lang("trans.preview")&lt;br&gt;@lang("trans.maxSize")&lt;br&gt;upload vertical &lt;br&gt;images.&lt;br&gt;Save the&lt;br&gt;image first&lt;br&gt; and then&lt;br&gt; check the&lt;br&gt; preview&lt;/p&gt;
    &lt;/div&gt;
    &lt;p style="border-bottom: 1px solid #dfe2e6;margin: 0; margin-top: 12px; margin-bottom: 12px;"&gt;
      &lt;input type="file" name="avatar" style="display: none;" id="settings_img"&gt;
      &lt;label for="settings_img" class="btn btn-success"&gt;@lang("trans.selectImage")&lt;/label&gt;
  </code></pre>
  
  <p>the javascript for the preview image is</p>
  
  <pre><code>function imagePreview(input,elm) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  $(elm).css("background-image","url('"+e.target.result+"')");
              }
              reader.readAsDataURL(input.files[0]);
          }
      }
      $("#settings_img").on("change",function(){
          imagePreview(this,"#settings_img_elm");
      });
      $("#feedback_hFile").on("change",function(){
          $(".send_feedback_image").show();
          imagePreview(this,"#sfb_image_preview");
      });
  </code></pre>