裁剪和保存图像圆JCrop

本文关键字：JCrop 图像 保存 裁剪 | 更新日期: 2023-09-27 17:53:06

我有一个让用户上传图片的页面，他们必须从图片中进行选择。这个选区必须是一个具有特定尺寸的圆。为了达到这个目的，我使用了下面的命令——

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

现在我想保存一个圆形的图像，目前它保存为一个正方形。如何从圆形选区中创建圆形图像?

裁剪和保存图像圆JCrop

我所做的工作是做以下的:

$('#<%=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;"/>

这应该有助于解决问题。

希望有帮助。

对

相关文章：