如何将图像画布保存到文件夹？ [英] How to save image canvas to folder?
本文介绍了如何将图像画布保存到文件夹？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要使用Ajax或javascript保存画布图像！！
tks！
<我的视图
@using（ Html.BeginForm（ SaveImage， Campaign，FormMethod.Post，新{id = drawingForm}）））
{
< canvas id = myCanvas width = 352 height = 352
style = border：1px solid＃d3d3d3;>
您的浏览器不支持HTML5 canvas标签。
< / canvas>
< input type = hidden name = imageData id = imageData />
<输入类型=按钮 id = btnSave值=保存图形 />
}
[HttpPost]
public ActionResult SaveImage（CampaignViewModel model，string imageData）
{
//代码...。
return RedirectToAction（ Index， Home）;
}
解决方案
我们在 ImindQ在线将画布导出为PNG，并根据您的情况使用以下经过修改的代码：
视图中：
<！DOCTYPE html>
< html>
< head>
< meta name = viewport content = width = device-width />
< title>图片< / title>
< / head>
< body>
< div>
@using（Html.BeginForm（ SaveImage，广告系列，FormMethod.Post，新{id = drawingForm}））
{
< canvas id = myCanvas width = 352 height = 352
style = border：1px solid＃d3d3d3;>
您的浏览器不支持HTML5 canvas标签。
< / canvas>
< input type = hidden name = imageData id = imageData />
<输入类型=按钮 id = btnSave值=保存工程图 />
}
< 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>
在控制器中：
使用系统；
使用System.Collections.Generic;
使用System.Linq;
使用System.Text;
使用System.Web;
使用System.Web.Mvc;
命名空间WebApplication2.Controllers
{
//公共类CampaignViewModel
// {
//公共字符串ImageData {get;组; }
//}
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）;
字符串png64 = Encoding.UTF8.GetString（buffer，0，len）;
byte [] png = Convert.FromBase64String（png64）;
System.IO.File.WriteAllBytes（ d：\\a.png，png）;
//字符串pngz = Encoding.UTF8.GetString（png，0，png.Length）;
// code .....
return RedirectToAction（ Index， Home）;
}
//
}
}
I need to save canvas image by using ajax or javascript...!! tks!
my view
@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");
}
解决方案
We in ImindQ Online export the canvas as PNG with the following adapted code for your scenario:
In view:
<!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>
in Controller:
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");
}
//
}
}
这篇关于如何将图像画布保存到文件夹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
