裁剪图像并将图像保存为圆形 JCrop

Posted 2023-02-25

【中文标题】裁剪图像并将图像保存为圆形 JCrop

【英文标题】：Crop and save images as circle JCrop

【发布时间】：2015-06-04 05:48:15

【问题描述】：

我有一个页面，用户可以上传图片，然后他们必须从该图片中做出选择才能使用。此选择必须是具有特定尺寸的圆。为了实现这一点，我使用了以下 -

 .jcrop-holder div
        
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
            margin: -1px;
        

现在我想保存该图像的一个圆圈..目前它保存为一个正方形。如何从圆形选择中创建一个圆形图像？任何帮助将不胜感激..

【参考方案1】：

我所做的工作是执行以下操作：

$('#<%=imgUpload.ClientID%>').Jcrop(
            onSelect: SelectCropArea,
            boxWidth: 600,
            boxHeight: 600,
            maxSize: [500, 500],
            minSize: [100, 100],
            aspectRatio: 2/2
        );

如您所见，我所做的是：图像大小无关紧要；它将始终被视为 600x600 和有限的裁剪尺寸，例如最小和最大 100 和 500。

在用户裁剪后，图像仍然是正方形，但要覆盖半径，如下所示：

<div style="height: 94px; width: 94px; border-radius: 100px; -webkit-border-radius: 100px;overflow: hidden; position: relative; top: 30px; left: 50px; display:table-cell; vertical-align:middle;">


<img src="../Images/user.png" runat="server" id="imgProfile"  style="width:100px;"/>

这应该有助于解决问题。

希望对你有帮助。

问候