I’ve been trying to solve this for about a week now.
I know it’s got to be something simple.
Requirement
- I need to use ASP – minimal Java as the page will do most processing / DB work using ASP.Net.
- I need to use cropper.js to crop the image. (imgImageToCrop)
- Once I crop the image, I need to drop it in the original images place (imgProfilePic)
- I’m using an ajaxToolkit:ModalPopupExtender (MPE)
- Needs to run in an asp:UpdatePanel (UP)
- I has other UPs on the page after this component. So, I need to confine the postbacks to this UP.
Problem
It’s working fine, I can upload the image, launch the ajax MPE, and set the ‘cropper’ info. The problem arises when I’m trying to get the original source image (the ‘imgProfilePic’) to update with the cropped image.
I’ve tried playing with the UP settings, storing the base64 data in a hidden field (‘hidImgSrc’) and pulling that in after I close the MPE, all sorts of stuff, but it’s eluding me & making me a bit crazy.
I ‘think’ it may be related to the ‘asp:PostBackTrigger’ in the UP, but in order to use the asp:FileUpload inside a UP apparently, I have to use a PostBackTrigger – not an AsyncPostBackTrigger.
The code-behind for (lnkbtnSaveCropped) is where I’m banging my head against the wall. I’ve tried using Javascript with ‘OnClientClick’ also code-behind that uses ‘ScriptManager.RegisterStartupScript’. But at every turn the ‘cropped’ image flashes up in the ‘imgProfilePic’ element and then the default “photographer.png” reappears. Hence my feeling it’s a rogue post back I can’t see… I’ve been looking at this too long.
Well, that’s my dilemma, any help would be appreciated.
Here’s the code.
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>
Code-Behind
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("~imgprofile") & "" & strFileName
Try
filUploadPhoto.SaveAs(filePathAndName)
imgImageToCrop.ImageUrl = "~imgprofile" & 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
enter image description here
enter image description here
New contributor
Tony Stephens is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.