将画布图像保存到服务器ASP.NET mvc
我想要做的是捕获图像,然后将其保存在服务器端。到目前为止,该图像只保存在客户端。将画布图像保存到服务器ASP.NET mvc
<script>
html2canvas(document.querySelector("body")).then(canvas => {
var img = canvas.toDataURL("image/png")
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
///location.href = img;
$.ajax({
type: 'POST',
url: "UserHome/UploadImage",
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
</script>
UserHomeController:
static string path = @"E:\XXXXX\XXXXXXX\";
[WebMethod()]
public static void UploadImage(string imageData)
{
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);//convert from base64
bw.Write(data);
bw.Close();
}
}
}
为什么没有保存图像一旦页面加载完成?虽然,它在另一个选项卡中显示的图像,如果我去掉下面一行,消除了ajax:
///location.href = img;
此外,我想知道是否可以捕捉到哪怕最小化浏览器屏幕?或以任何方式来完成?
更新时间:
因此,我已成功保存截图到我的服务器端,但问题是,我该如何捕获屏幕最小化浏览器是什么时候?我运行脚本并尽量减少浏览器,但它仍然捕获浏览器图像并将其保存到服务器文件夹。无论如何,我现在可以在浏览器外部捕捉屏幕图像吗?
本教程使用的.net web表单与MVC的工作方式稍有不同。
我会尝试与更换[的WebMethod()]装修[HttpPost],并返回一个ActionResult
[HttpPost]
public ActionResult UploadImage(string imageData)
{
// do stuff
return new ActionResult();
}
你可能会发现看在浏览器开发工具的网络标签,看看有什么服务器的响应是。我怀疑现在正在抛出500错误。
我尝试了一些代码的其他修改。请参阅更新后的问题。 –
很高兴你有控制器工作。作为另一个问题,您可能会得到更好的结果。我没有意识到一个API可以做到这一点,因为它在浏览器沙箱之外。插件可能是需要的。 –
您应该发送一个字节数组到服务器,其中字节数组是您的图像。 例如,您可以检查here,如何从画布获取blob。
在客户端:let formData = new FormData(); formData.append('files[0]', someBlob);// send formData
在服务器端:var form = await Request.ReadFormAsync(); var file = form.Files.First(); var bytes = file.OpenReadStream().ToBytes();
看起来你有问题,发送文件。试试从[这里]的答案(https://*.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax)。 –