Send Base64 Image Data from Client Side to Server using Syncfusion Image Editor | ASP.NET MVC
This article demonstrates how to send base64 image data from the client side to the server using Syncfusion’s Image Editor in an ASP.NET MVC application. The process involves capturing the image data as a base64 string using the Image Editor’s API and then using AJAX to post the data to the server where it can be converted to a byte array.
Prerequisites
- Syncfusion Essential JS 2
- ASP.NET MVC
Implementation
Client-Side: Capturing and Sending Image Data
First, include the Syncfusion Image Editor and Button components in your view. Here’s an example of how to set up the Image Editor and a button to trigger the save action:
[Index.cshtml]
@Html.EJS().Button("save").CssClass("e-primary").Content("Save").Render()
<div class="col-lg-12 control-section e-img-editor-sample">
@Html.EJS().ImageEditor("image-editor").Created("created").Render()
</div>
<script>
function created() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.open('https://www.shutterstock.com/image-photo/linked-together-life-cropped-shot-600w-2149264221.jpg');
}
document.getElementById('save').onclick = function () {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
var imageData = imageEditorObj.getImageData();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = imageData.width;
canvas.height = imageData.height;
ctx.putImageData(imageData, 0, 0);
var base64Url = canvas.toDataURL();
$.ajax({
type: "POST",
data: { imageData: base64Url },
url: "/Home/BaseUrl",
success: function (imageData) {
console.log("success")
}
});
}
</script>
Server-Side: Handling the Base64 Image Data
On the server side, create an action method to receive the base64 image data and convert it into a byte array:
[HomeControllers.cs]
[HttpPost]
public void BaseUrl(string imageData)
{
string base64Data = imageData.Split(',')[1];
// Convert the base64-encoded data to a byte array
byte[] byteArray = Convert.FromBase64String(base64Data);
}
Demo Sample
To see a working example of the implementation, you can download the demo sample provided by Syncfusion:
Conclusion
By following the steps outlined above, you can successfully send base64 image data from the Syncfusion Image Editor on the client side to an ASP.NET MVC server. This can be useful for scenarios where you need to process or store images on the server after they have been edited on the client side.
