Question

我有这个代码将画布图像保存到Web服务器。但是当图像具有超过200 * 200像素和高分辨率时它不起作用：它不能保存。小图片有效;但是高分辨率的大图像不起作用。

JavaScript :( drawShapes在canvas中绘制图像，json用于调用CS.aspx / UploadImage）

<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>

正文：onload：加载drawShapes（）函数（此代码在myCanvas中绘制图像（im.jpg））

<body onload="drawShapes()">
<form id="form1" runat="server">
    <div>
        <canvas id="myCanvas" width="1800" height="1080"></canvas>
        <a id="TZ">Save</a>
    </div>
</form>

ASP.net：CS.aspx / UploadImage（此代码用于在服务器上保存图像画布）

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

的web.config：

<system.web> 
<httpRuntime maxRequestLength="153600" executionTimeout="900" /> 
</system.web>

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

0 个答案: