Fatal编程技术网
  • javascript/
  • Javascript 使用asp.net将高分辨率画布图像保存到服务器

Javascript 使用asp.net将高分辨率画布图像保存到服务器

javascript c# asp.net canvas

Javascript 使用asp.net将高分辨率画布图像保存到服务器,javascript,c#,asp.net,canvas,Javascript,C#,Asp.net,Canvas,我有以下代码将画布图像保存到web服务器。但当图像的分辨率超过200*200像素且分辨率很高时，它就不起作用了：它无法保存。一个小的图像作品；但高分辨率的大图像不起作用 <script type="text/Javascript"> function drawShapes() { var canvas = document.getElementById("myCanvas"); var context = can

我有以下代码将画布图像保存到web服务器。但当图像的分辨率超过200*200像素且分辨率很高时，它就不起作用了：它无法保存。一个小的图像作品；但高分辨率的大图像不起作用

    <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();
            }
        }
    }
}


函数drawShapes（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
imageObj.src=“im.jpg”；
imageObj.onload=函数（）{
drawImage（imageObj，0,0,1800,1080）；
}
}
$（文档）.ready（函数（）{
$（“#TZ”）。单击（函数（）{
var image=document.getElementById（“myCanvas”）.toDataURL（“image/png”）；
image=image.replace（'data:image/png；base64'，''）；
$.ajax({
键入：“POST”，
url:'Include/CS.aspx/UploadImage'，
数据：'{“imageData”：“'+image+'''''}'，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
/*成功：功能（msg）{
警报（“图像已成功保存！”）；
}*/
});
});
});
拯救
使用制度；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.WebControl；
使用System.IO；
使用System.Web.Script.Services；
使用System.Web.Services；
[脚本服务]
公共部分类包括：System.Web.UI.Page
{
受保护的无效页面加载（对象发送方、事件参数e）
{
}
[WebMethod（）]
公共静态无效上载映像（字符串imageData）
{
字符串路径=System.Web.Hosting.HostingEnvironment.MapPath（“~/Images/”）；
字符串fileNameWitPath=path+DateTime.Now.ToString（）.Replace（“/”，“-”）.Replace（“，“-”）.Replace（“：”，“）+”.png”；
使用（FileStream fs=newfilestream（fileNameWitPath，FileMode.Create））
{
使用（BinaryWriter bw=新的BinaryWriter（fs））
{
字节[]数据=Convert.FromBase64String（imageData）；
写入（数据）；
bw.Close（）；
}
}
}
}
您可能需要设置maxRequestLength，类似于web.config中的内容：

<system.web> 
    <httpRuntime maxRequestLength="153600" executionTimeout="900" /> 
</system.web>
请参阅：

当您说它不起作用时，您能更具体一点吗？是否有服务器或客户端抛出的错误？>200*200像素=错误。。。或者是文件/数据大小？我的图像大小是1024*768，但此代码无法在服务器中保存画布图像。减少图像大小时，此代码有效！谢谢，我的图像大小是1024*768，但这段代码无法在服务器中保存画布图像。当图像大小减小到200*200时，此代码有效！你的回答不对，请帮帮我也许‘153600’不够大？只要尝试一个非常大的数字，看看它是否有效，然后你至少知道这是否是问题所在。