C# 如何将图像画布保存到文件夹？_C#_Asp.net Mvc_Canvas

C# 如何将图像画布保存到文件夹？

c# asp.net-mvc canvas

C# 如何将图像画布保存到文件夹？,c#,asp.net-mvc,canvas,C#,Asp.net Mvc,Canvas,我需要使用ajax或javascript保存画布图像。。。！！ tks 我的看法 @using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" })) { <canvas id="myCanvas" width="352" height="352" style="border: 1px sol

我需要使用ajax或javascript保存画布图像。。。！！ tks

我的看法

@using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
{

                <canvas id="myCanvas" width="352" height="352"
                        style="border: 1px solid #d3d3d3;">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
                <input type="hidden" name="imageData" id="imageData"/>
                <input type="button" id="btnSave" value="Save Drawing"/>
}


[HttpPost]  
public ActionResult SaveImage(CampaignViewModel model, string imageData)
 {
     //code.....
     return RedirectToAction("Index", "Home");
 }

@使用（Html.BeginForm（“SaveImage”，“Campaign”，FormMethod.Post，new{id=“drawingForm”}））
{
您的浏览器不支持HTML5画布标记。
}
[HttpPost]
public ActionResult SaveImage（活动视图模型、字符串图像数据）
{
//代码。。。。。
返回重定向到操作（“索引”、“主页”）；
}
视图中的

：

      @using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
    {
         <canvas id="myCanvas" width="352" height="352"
                            style="border: 1px solid #d3d3d3;">
                        Your browser does not support the HTML5 canvas tag.
                    </canvas>
        <input type="hidden" name="imageData" id="imageData"/>
        <input type="button" onclick="saveimage(event)" id="btnSave" value="Save Drawing" />
        <img style="display: none" src="images/ajax-loader/ajax-loader.gif" id="progressbar"/>
    }

   @*call action*@
<script>
    function saveimage(event) {
        @*prevent call back to server*@
        event.preventDefault();
        @*show progress bar *@
        var progress = document.getElementById("progressbar");
        $(progress).css('display', 'block');
        @*get form data *@
        var data = $("#drawingForm").serialize();
        @*save image information to imageData tag  *@
        var image = document.getElementById("myCanvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');
        $("#imageData").val(image);

         @*make ajax call *@
        $.ajax({
            url: "/Campaign/SaveImage",
            data: data,
            type: "Post",
            dataType: "Json",
            success: function (data) {
                //do something
            },
            error: function (xhr, status, error) {
                //do something
            },
            complete: function (data) {
                $(progress).css('display', 'none');
            }
        });
    }</script>

我们正在将画布导出为PNG，并根据您的场景使用以下改编代码：

鉴于：

<!DOCTYPE html>   
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Image</title>
</head>
<body>
    <div> 
        @using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
        {   
            <canvas id="myCanvas" width="352" height="352"
                    style="border: 1px solid #d3d3d3;">
                Your browser does not support the HTML5 canvas tag.
            </canvas>
            <input type="hidden" name="imageData" id="imageData" />
            <input type="button" id="btnSave" value="Save Drawing" />
        }

        <script>
            (function () {
                document.getElementById('btnSave').addEventListener('click', function () {
                    var r = new XMLHttpRequest();
                    r.open("POST", "SaveImage", true);
                    r.onreadystatechange = function () {
                        if (r.readyState != 4 || r.status != 200) return;                            
                    };
                    var p = document.getElementById('myCanvas').toDataURL('image/png').replace('data:image/png;base64,', '');
                    r.send(p);
                });
            })();
        </script>
    </div>
</body>
</html>

<!DOCTYPE html>   
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Image</title>
</head>
<body>
    <div> 
        @using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
        {   
            <canvas id="myCanvas" width="352" height="352"
                    style="border: 1px solid #d3d3d3;">
                Your browser does not support the HTML5 canvas tag.
            </canvas>
            <input type="hidden" name="imageData" id="imageData" />
            <input type="button" id="btnSave" value="Save Drawing" />
        }

        <script>
            (function () {
                document.getElementById('btnSave').addEventListener('click', function () {
                    var r = new XMLHttpRequest();
                    r.open("POST", "SaveImage", true);
                    r.onreadystatechange = function () {
                        if (r.readyState != 4 || r.status != 200) return;                            
                    };
                    var p = document.getElementById('myCanvas').toDataURL('image/png').replace('data:image/png;base64,', '');
                    r.send(p);
                });
            })();
        </script>
    </div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    //public class CampaignViewModel
    //{
    //    public string ImageData { get; set; }
    //}

    public class CampaignController : Controller
    {
        // GET: Campaign
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult SaveImage()
        {
            int len = (int)Request.InputStream.Length;
            byte[] buffer = new byte[len];
            int c = Request.InputStream.Read(buffer, 0, len);
            string png64 = Encoding.UTF8.GetString(buffer, 0, len);
            byte[] png = Convert.FromBase64String(png64);
            System.IO.File.WriteAllBytes("d:\\a.png", png);
            //string pngz = Encoding.UTF8.GetString(png, 0, png.Length);
            //code.....
            return RedirectToAction("Index", "Home");
        }
        //
    }
}