使用cropper.js 和 ASP.NET 裁剪照片 - 使用 UpdatePanel

Question

我已经尝试解决这个问题大约一周了。我知道这一定是简单的事情。

要求

我需要使用 ASP.NET - 最少的 Java，因为页面将使用 ASP.NET 完成大部分处理/数据库工作
我需要使用cropper.js来裁剪图像(
```
imgImageToCrop
```
)
裁剪图像后，我需要将其放在原始图像位置(
```
imgProfilePic
```
)
我正在使用 ajaxToolkit:ModalPopupExtender (MPE)
需要在
```
asp:UpdatePanel
```
（向上）
此组件之后页面上还有其他 UP。所以，我需要将回发限制在这个 UP 中。

问题

工作正常，我可以上传图像，启动 ajax MPE，并设置“裁剪器”信息。当我尝试获取原始源图像（

imgProfilePic

）以使用裁剪后的图像进行更新时，问题就出现了。

我尝试过使用 UP 设置，将 Base64 数据存储在隐藏字段中（

hidImgSrc

），并在关闭 MPE 后将其拉入，各种各样的东西，但它让我感到困惑，让我有点疯狂。

我“认为”它可能与 UP 中的

asp:PostBackTrigger

有关，但为了在 UP 中使用

asp:FileUpload

显然，我必须使用

PostBackTrigger

- 而不是

AsyncPostBackTrigger

。

lnkbtnSaveCropped

的代码隐藏是我用头撞墙的地方。我尝试过使用 Javascript 和

OnClientClick

以及使用

ScriptManager.RegisterStartupScript

的代码隐藏。但每次“裁剪”图像都会在

imgProfilePic

元素中闪烁，然后默认的

photographer.png

会重新出现。因此，我感觉这是一个流氓帖子，我看不到......我已经看这个太久了。

嗯，这就是我的困境，任何帮助将不胜感激。

这是代码 - JS + CSS：

<style>
    .img-container img {
        max-width: 100%;
    }

    .input-group-prepend-25 {
        width: 25%; /*adjust as needed*/
    }

    .modalPopup400 {
        width: 400px;
        border: none;
        font-family: Arial, Helvetica, sans-serif;
    }

    .img-icon-256 {
        width: 256px;
        height: 256px;
    }
</style>
<script>
    var cropBoxData;
    var canvasData;
    var cropper;
    var imageDataURL;

    function showFileOpen() {
        var btnFileOpen = document.getElementById('filUploadPhoto');
        btnFileOpen.click();
    }
    function getCroppedImage() {
        cropBoxData = cropper.getCropBoxData();
        canvasData = cropper.getCanvasData();
        document.getElementById("<%=imgProfilePic.ClientID %>").setAttribute('src', cropper.getCroppedCanvas().toDataURL('image/jpeg'));
    };
    function setCropper() {
        var imagetoCrop = document.getElementById('imgImageToCrop');
        cropper = new Cropper(imagetoCrop, {
            viewMode: 1,
            rounded: true,
            movable: true,
            zoomable: true,
            cropBoxResizable: false,
            cropBoxMovable: true,
            ready: function () {
                cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
                cropper.setCropBoxData({ width: 200, height: 200 });
            }
        });
    }
</script>

ASPX 标记：

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <div class="container">
            <asp:UpdatePanel ID="upanProfileDetails" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="row pt-2">
                        <asp:UpdatePanel ID="upanPhotUpload" runat="server" ChildrenAsTriggers="True" UpdateMode="Always">
                            <ContentTemplate>
                                <!-- Photo -->
                                <!-- ============================================================================ -->
                                <div class="col-sm-12 col-md-3 col-lg-5 d-flex justify-content-center">
                                    <div class="justify-content-center pt-2">
                                        <div class="col text-center">
                                            <asp:Image ID="imgProfilePic" ImageUrl="https://i.ibb.co/hM6cBrF/photographer.png" CssClass="img-icon-256 rounded-circle img-fluid" runat="server" />
                                            <asp:FileUpload ID="filUploadPhoto" accept=".jpg, .png, .gif" runat="server" />
                                            <asp:Button ID="btnUploadImage" Text="Upload Photo" runat="server" CssClass="btn btn-primary" />
                                        </div>
                                    </div>
                                </div>
                                <!-- ============================================================================ -->
                                <!-- Modal - Crop Photo -->
                                <!-- ============================================================================ -->
                                <asp:LinkButton ID="lnkdummyCrop" runat="server" Visible="True"></asp:LinkButton>
                                <ajaxToolkit:ModalPopupExtender ID="mpe_Crop"
                                    runat="server"
                                    BackgroundCssClass="modalbackground"
                                    Enabled="True"
                                    PopupControlID="panCrop"
                                    TargetControlID="lnkdummyCrop">
                                </ajaxToolkit:ModalPopupExtender>
                                <asp:Panel ID="panCrop" runat="server" BorderWidth="0px" CssClass="modalPopup400" Style="display: none">
                                    <div class="card">
                                        <div class="card-header bg-primary">
                                            <h1 class="modal-title fs-5 text-white">
                                                <asp:Label ID="lblMsgboxTitle" runat="server" Text="Crop Image"></asp:Label>
                                            </h1>
                                        </div>
                                        <div class="card-body">
                                            <div class="row pb-2 pt-2">
                                                <div class="col text-center">
                                                    <div class="img-container">
                                                        <asp:Image ID="imgImageToCrop" ImageUrl="https://i.ibb.co/hM6cBrF/photographer.png" runat="server" />
                                                    </div>
                                                    <strong>Zoom In and Out - Mouse Wheel.</strong>
                                                </div>
                                            </div>
                                            <div class="row text-center">
                                                <div class="col text-center">
                                                    <asp:LinkButton ID="lnkbtnCropImage" runat="server" class="btn btn-warning w-25" Text="Crop" ClientIDMode="Static"></asp:LinkButton>
                                                    <asp:LinkButton ID="lnkbtnSaveCropped" runat="server" class="btn btn-primary w-25" Text="Save" ClientIDMode="Static"></asp:LinkButton>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </asp:Panel>
                                <!-- ============================================================================ -->
                            </ContentTemplate>
                            <Triggers>
                                <asp:PostBackTrigger ControlID="btnUploadImage" />
                                <asp:AsyncPostBackTrigger ControlID="lnkbtnCropImage" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>

                        <div class="col-sm-12 col-md-9 col-lg-7">
                            <div class="row pt-1">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-prepend-25">Name</span>
                                        <asp:TextBox ID="txtProfileDetailsFirstName" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
                                        <asp:TextBox ID="txtProfileDetailsLastName" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="row pt-1">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-prepend-25">Phone</span>
                                        <asp:TextBox ID="txtProfileDetailsPhone" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="row pt-1">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-prepend-25">Address
                                        </span>
                                        <asp:TextBox ID="txtProfileDetailsAddress" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="row pt-1">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-prepend-25">Birth Year</span>
                                        <asp:TextBox ID="txtProfileDetailsYOB" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="row pt-1 d-flex justify-content-end">
                                <div class="col-9 text-start">
                                </div>
                                <div class="col-3 text-end d-flex justify-content-end">
                                    <asp:UpdateProgress ID="upanProgProfileDetails" runat="server">
                                        <ProgressTemplate>
                                            <div class="pe-2">
                                                <div class="spinner-border fs-6 text-secqr-orange" role="status">
                                                    <span class="visually-hidden">Saving...</span>
                                                </div>
                                            </div>
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>
                                    <asp:LinkButton ID="lnkbtnProfileDetailsCancel" runat="server" CssClass="bi bi-x-circle-fill fs-3 text-red pe-2" ToolTip="Cancel" CommandName="cancel" CommandArgument="personal" Visible="false"></asp:LinkButton>
                                    <asp:LinkButton ID="lnkbtnProfileDetailsEdit" runat="server" CssClass="btn btn-warning" ToolTip="Edit" CommandName="edit" CommandArgument="personal">Edit</asp:LinkButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="lnkbtnProfileDetailsCancel" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="lnkbtnProfileDetailsEdit" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            
            <!-- More Panels with Other Info Below  -->

        </div>
        <asp:HiddenField ID="hidImgSrc" runat="server" ClientIDMode="Static" />
    </div>
</form>

后台代码：

Protected Sub btnUploadImage_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUploadImage.Click
    If filUploadPhoto.HasFile Then
        Dim fi As FileInfo = New FileInfo(filUploadPhoto.FileName)
        Dim strFileName As String = "testing.jpg"
        Dim filePathAndName As String = Server.MapPath("~\img\profile") & "\" & strFileName
        Try
            filUploadPhoto.SaveAs(filePathAndName)
            imgImageToCrop.ImageUrl = "~\img\profile\" & strFileName
            mpe_Crop.Show()
        Catch ex As Exception
            'Failed to Save.
        End Try
    Else
        'No File.
    End If
End Sub
Private Sub lnkbtnCropImage_Click(sender As Object, e As EventArgs) Handles lnkbtnCropImage.Click
    Dim sbCropperScript As New StringBuilder
    With sbCropperScript
        .Append("setCropper();")
    End With
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setupCopper", sbCropperScript.ToString, True)
End Sub

在此输入图片描述

Answer 1

既然您使用 AJ 工具包，那么为什么不使用 asyncFileUpload，甚至 AjaxFileUpLoader（它们在 UP 面板内可以正常工作，因为它们不需要回发）。

更新面板的工作和存在就是不回发整个页面，但文件上传控件需要回发整个页面！

因此，这排除了在 UP 面板中使用文件上传的可能性，因为您现在必须引入整页回发，这意味着 UP 无法使用文件上传控件。您尝试让 FileUpLoad 工作，然后您将遭受整页回发。

所以，事实证明，在 UP 面板中使用 fileUpLoad 不起作用，建议解决此问题的示例会强制返回整页，因此您已经违背了 UP 面板的目的。

另外，为什么要在客户端尝试重新调整图片大小，然后在服务器端再次保存文件？这意味着您仍然需要重新上传图片，或者至少在单击按钮时处理图像控件。

因此，一旦图片上传，然后使用后面的代码重新调整大小，并将其发送回图像控件。无论哪种方式，您都会重新上传该图像，或重新下载该图像，因此您根本无法获得任何速度或增加的响应和性能。

请记住，在大多数情况下，任何页面回发都会折叠弹出扩展面板。

因此，我建议您采用AJ上传控件，这样上传时就不会出现页面回发的情况。然而，在几乎所有情况下，您可能会附加一个客户端回发 JavaScript 例程（例如 AjaxFileUpLoad 控件），因为上传后问题实际上不是回发！并且这样的回发可以仅限于更新面板。

虽然我仍然使用 AJ 工具包（用于上传器和一些屏蔽输入），但我现在使用 jQuery.UI 对话框，因为它们更灵活，提供更好的屏幕定位，并且您可以在更新面板中使用它们.

那么我建议重新调整图像服务器端的大小，因为无论如何你都想保存调整大小的图像，对吗？

如果您在上传之前调整大小，那么没问题，但从代码来看，调整大小是在上传之后进行的，这意味着我们仍在上传原始文件及其原始文件大小。

我怀疑有一种方法可以在上传之前调整图像大小，但你的叙述并不表明这是这里的目标。

因此，第一步是删除 FileUpLoad 控件 - 它需要整页回发才能工作。（甚至不清楚您如何设法在更新面板内放置并让 FileUpLoad 工作 - 由于该控件需要整页回发，它过去对我来说从未起作用，但更新面板的引入因此与使用冲突该控制。

我可以发布一些示例代码来上传和重新调整大小，但这将是用于重新调整大小的服务器端代码。

使用cropper.js 和 ASP.NET 裁剪照片 - 使用 UpdatePanel

问题描述投票：0回答：1

1个回答

最新问题

使用cropper.js 和 ASP.NET 裁剪照片 - 使用 UpdatePanel

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1