Question

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

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

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

Answer 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" alt="Profile Picture" style="width:100px;"/>

这应该有助于解决问题。

希望它有所帮助。

此致

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

1 个答案: