I am facing an issue with saving a canvas image to the web server. The problem arises when the image size exceeds 200x200 pixels and has high resolution – it fails to save in such cases. Saving a smaller image works fine, but larger images with high resolution do not get saved.
<script type="text/Javascript>
function drawShapes() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "im.jpg";
imageObj.onload = function () {
context.drawImage(imageObj, 0, 0, 1800, 1080);
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#TZ").click(function () {
var image = document.getElementById("myCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Include/CS.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
/*success: function (msg) {
alert('Image saved successfully !');
}*/
});
});
});
</script>
<body onload="drawShapes()">
<form id="form1" runat="server">
<div>
<canvas id="myCanvas" width="1800" height="1080></canvas>
<a id="TZ">Save</a>
</div>
</form>
</body>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;
[ScriptService]
public partial class Include_CS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod()]
public static void UploadImage(string imageData)
{
string path = System.Web.Hosting.HostingEnvironment.MapPath("~/Images/");
string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
}