如果图像在使用图像干预包通过 IOS 设备上传时旋转，如何调整图像大小并重新定向？

Question

我在 Whosebug 上其他开发人员提供的一些教程视频和代码的帮助下开发了一个 Laravel 网络应用程序。除了图像上传功能外，该应用程序运行良好。我遇到的问题与上传的图像在侧面或底部被剪切以及图像通过任何 IOS 设备上传然后图像旋转有关。我已经安装了图像干预，但我不知道将代码放入我的文件中的何处我正在共享我的控制器代码以及图像显示代码控制器代码

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->u = new User();
    }
    public function search(Request $request){
        $search_input = $request["input"];
        $path = $request["path"];
        $users = User::where("name","like","%$search_input%")->orWhere("username","like","%$search_input%")->get();

        if ($users->isEmpty()) {
            return "<p style='text-align: center;width: 100%;color: gray;font-size: 12px;margin: 3px'>".Lang::get('trans.nothingToShow')."</p>";
        }else{
            foreach ($users as $user) {
                if ($user->verify == 1) {
                    $ifVerify = '<span class="verify-badge" style="width: 420px; height: 700px; background:  url(\''.$path.'/imgs/verify.png\') no-repeat; background-size: cover; margin: 0px 2px;"></span>';
                }else{
                    $ifVerify = '';
                }
                if($user->avatar == "avatar.png"){
                    $avatar_path = '/imgs/avatar.png';
                }else{
                    $avatar_path = '/storage/avatar/'.$user->avatar;
                }
                echo '<div class="navbar-search-item">
                    <a href="'.$path.'/'.$user->username.'">
                        <div>
                            <div style="background-image:url(\''.$path.$avatar_path.'\');">
                            </div>
                            <p>
                                '.$user->name.$ifVerify.'<br>
                                <span>@'.$user->username.'</span>
                            </p>
                        </div>
                    </a>
                </div>';
            }
        }
    }
    public function profile($username){
        $user_info = User::where("username",$username)->get();
        foreach ($user_info as $uinfo) {
            $user_id = $uinfo->uid;
        }
        if (isset($user_id)) {
            $feedbacks = post::where("to_id",$user_id)->where("privacy",1)->orderBy('time', 'desc')->get();
            $feedbacks_count = post::where("to_id",$user_id)->get()->count();
            $new_count = post::where("to_id",$user_id)->where('read',0)->get()->count();
            // check comments on post (count)
            $commentsCount = array();
            foreach ($feedbacks as $fb) {
                $pid = $fb->pid;
                $countComments = comment::where("c_pid",$pid)->get()->count();
                array_push($commentsCount,$countComments);
            }
            return view("pages.profile")->with(["user_info" => $user_info,"feedbacks" => $feedbacks,'feedbacks_count' => $feedbacks_count,'new_count' => $new_count,'commentsCount' => $commentsCount]);
        }else{
            return view("pages.profile")->with(["user_info" => $user_info]);
        }
    }
    public function settings($username){
        $user_info = User::where("username",$username)->get();
        if (Auth::user()->username == $username) {
            return view("pages.settings")->with("user_info",$user_info);
        }else{
            return redirect()->back();
        }

    }
    public function s_general(Request $request){
        $this->validate($request,[
            'avatar' => 'nullable|image|mimes:jpeg,png,jpg|max:3072',
            'fullname' => 'required',
            'email' => 'required|email'
        ]);
        if ($request['fullname'] == Auth::user()->name && $request['email'] == Auth::user()->email && !$request->hasFile('avatar')) {
            return redirect()->back()->with('general_msg', Lang::get('trans.noChanges_MSG'));
        }else{
            $avatar = $request->file('avatar');
            if ($request->hasFile('avatar')) {
                $avatar_ext = $avatar->getClientOriginalExtension();
                $avatar_name = rand(9,999999999)+time().".".$avatar_ext;
                $avatar_new = $avatar->storeAs("avatar",$avatar_name);
            }else{
                $avatar_name = Auth::user()->avatar;
            }
            $update_general = User::where('uid',Auth::user()->uid)->update(['name' => $request['fullname'],'email' => $request['email'],'avatar' => $avatar_name]);
            return redirect()->back()->with('general_msg', Lang::get('trans.changes_saved'));
        }

    }

这就是我显示图像的方式 <div class="profile-avatar" style="width: 300px;height:400px; border-radius: 0%;background-image: url('@if(Auth::user()->avatar == "avatar.png") {{ url("/imgs/".Auth::user()->avatar) }} @else {{ url("/storage/avatar/".Auth::user()->avatar) }} @endif');">

请帮我解决这个问题，我应该把代码放在哪里？

此代码用于图片预览

  <div style="display: inline-flex;">
    <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()->avatar == "avatar.png") {{ url("/imgs/".Auth::user()->avatar) }} @else {{ url("/storage/avatar/".Auth::user()->avatar) }} @endif');">
  </div>
  <p style="color: #a7aab5; font-size: 9px;padding: 25px 10px 25px 10px; margin: 0;">@lang("trans.preview")<br>@lang("trans.maxSize")<br>upload vertical <br>images.<br>Save the<br>image first<br> and then<br> check the<br> preview</p>
  </div>
  <p style="border-bottom: 1px solid #dfe2e6;margin: 0; margin-top: 12px; margin-bottom: 12px;">
    <input type="file" name="avatar" style="display: none;" id="settings_img">
    <label for="settings_img" class="btn btn-success">@lang("trans.selectImage")</label>

预览图像的javascript是

function imagePreview(input,elm) {
        if (input.files && 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");
    });

Answer 1

您可以查看有关如何 resize 图像的 Intervation 文档，我还为您创建了一个 s_general 函数的示例：

$avatar = $request->file('avatar');

if ($request->hasFile('avatar')) {

    //pass uploaded avatar to Intervention Image instance
    $image = \Image::make($avatar);

    //resize image to 300 width, keep height automated adjusted, or any other width you need
    $image->resize(300, null, function ($constraint) {
        $constraint->aspectRatio();
    });

    //Or you can set specific width and height
    //$image->resize(300, 200);

    $avatar_ext = $avatar->getClientOriginalExtension();
    $avatar_name = rand(9,999999999) + time().".".$avatar_ext;


    //I used public path to store the image you can change it based on your needs
    $image->save(public_path('/avatar/'.$avatar_name));

}else{

    $avatar_name = Auth::user()->avatar;
}

Answer 2

下面的代码应该可以帮助您入门。您在这里寻找的两个关键是干预 orientate and resize 方法，它们应该可以解决您提到的两个问题。 Orientation 将根据 EXIF 数据旋转图像，resize 可以将图像调整为您需要的任何规格。

导入门面

use Intervention\Image\Facades\Image;

建议

从您的导入中删除 use image;，因为它可能会导致或将导致您出现问题。无效。

s_general方法调整

public function s_general(Request $request){
    $this->validate($request,[
        'avatar' => 'nullable|image|mimes:jpeg,png,jpg|max:3072',
        'fullname' => 'required',
        'email' => 'required|email'
    ]);

    if ($request['fullname'] === Auth::user()->name && $request['email'] === Auth::user()->email && !$request->hasFile('avatar')) {
        return redirect()->back()->with('general_msg', Lang::get('trans.noChanges_MSG'));
    }

    if ($request->hasFile('avatar')) {
        // Grab the original image from the request
        $originalImage = $request->file('avatar');

        // Grab the original image extension
        $originalExtension = $originalImage->getClientOriginalExtension();

        // Instantiate a new Intervention Image using our original image,
        // read the EXIF 'Orientation' data of the image and rotate the image if needed
        $newImage = Image::make($originalImage)->orientate();

        // Resize the new image to a width of 300 and a height of null (auto)
        // we also use a callback to constrain the aspect ratio so we don't distort the image on resize
        $newImage->resize(300, null, function ($constraint) {
            $constraint->aspectRatio();
        });

        // Generate a randomized filename and append the original image extension
        $filename = random_int(9, 999999999) + time() . '.' . $originalExtension;

        // Save the new image to disk
        $newImage->save(storage_path('app/public/avatar/' . $filename));
    } else {
        $filename = Auth::user()->avatar;
    }

    User::where('uid', Auth::user()->uid)->update(
        [
            'name' => $request['fullname'],
            'email' => $request['email'],
            'avatar' => $filename
        ]);

    return redirect()->back()->with('general_msg', Lang::get('trans.changes_saved'));
}

更多建议

我知道这不是代码审查，但是 class 名称使用 PascalCase。我看到你有一些导入，例如 App\comment 和 App\post

似乎不需要您的构造函数。我会放弃它。如果您保留它，我会习惯使用更具描述性的变量名称。像 $u 这样的短名称通常被认为是不好的做法。

您有一些未使用的导入，可以删除 Validator、Hash 和 MessageBag 以清理它。

您的控制器正在做很多大多数人认为不好的事情。例如，用 html 摸索。 10 次中有 9.9 次你可能应该利用 blade 来做这些事情，因为这是它的主要目的之一。

坚持一种或另一种命名约定。您正在为您的变量使用驼峰式和 snake_case 的混合。我更喜欢驼峰式，但无论你选择哪种，最好坚持使用，不要混用。

抱歉，我知道这不是代码审查，我只是认为一些小建议可能会在将来对您有所帮助。

Answer 3

使用图像干预来调整大小和纠正从移动设备上传的图像的方向 phone。如果您使用简单的 javascript 类似

的方式显示此图片的预览

reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");

那么有可能图像预览的方向不是我们想要的方向，但一旦您保存图像，方向就会正确。这个定位问题主要是在 iphone 上遇到的。方向校正和调整大小的代码是

  $newImage = Image::make($originalImage)->orientate();


        $newImage->resize(300, null, function ($constraint) {
            $constraint->aspectRatio();
        });
///or for resizing use

 $newImage->resize(width,height);

如果图像在使用图像干预包通过 IOS 设备上传时旋转，如何调整图像大小并重新定向？

how to resize image and reorient it if it rotates when uploaded through IOS devices using image intervention package?

iphone

image-uploading

image-resizing

uiimageorientation

laravel