Question

我需要使图像变圆然后上传。这是我更新图片的代码：

public function imageUpdate(Request $request)
{
    $request->validate([
        'image'=>'required|mimes:jpeg,png,jpg,gif|max:2048', 
    ]);

    $data = $request->except(['_token','_method', 'image']);

    if($request->image){

        if (auth()->user()->image != null) { 
            Storage::disk('public_uploads')->delete('user/'. auth()->user()->image);
        }

        Image::make($request->image)->save('uploads/user/'. $request->image->hashName());

        $data['image'] = $request->image->hashName();
    }

    auth()->user()->update($data);
    return redirect()->back();
}

这就是Intervention Image dec中的方式，但是不知道在我的代码和该代码之间混用:(：

// create empty canvas with background color
$img = Image::canvas(300, 200, '#ddd');

// draw a filled blue circle
$img->circle(100, 50, 50, function ($draw) {
    $draw->background('#0000ff');
});

// draw a filled blue circle with red border
$img->circle(10, 100, 100, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(1, '#f00');
});

// draw an empty circle with 5px border
$img->circle(70, 150, 100, function ($draw) {
    $draw->border(5, '000000');
});

Answer 1

您要求提供CSS建议：

<img class="round-img" src="whatever.jpg">

<style>
.round-img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover; /* this centres the image within the circle */
    transform: translateY(-0.5rem); /* I usually do something like this with round design elements just so they don't look like they're falling too low */
}
</style>

src中的图像可以是矩形，但仍会在圆形框中被裁剪。

使用干预图像圈出图像

1 个答案: