如何将画布上载到project';s文件夹使用javascript和mvc
我想将我的画布保存到我的项目文件夹“Upload”中,因此尝试将其转换为图像,然后将其发送到代码隐藏并保存。 但它得到的是整个网页截图,而不仅仅是画布 这是我的javascript代码:如何将画布上载到project';s文件夹使用javascript和mvc,javascript,asp.net-mvc,html5-canvas,Javascript,Asp.net Mvc,Html5 Canvas,我想将我的画布保存到我的项目文件夹“Upload”中,因此尝试将其转换为图像,然后将其发送到代码隐藏并保存。 但它得到的是整个网页截图,而不仅仅是画布 这是我的javascript代码: html2canvas(document.body, {onrendered: function (canvas) { var mergedImage = canvas.toDataURL("image/png"); mergedImage = mergedImage.replace('data:image/p
html2canvas(document.body, {onrendered: function (canvas) {
var mergedImage = canvas.toDataURL("image/png");
mergedImage = mergedImage.replace('data:image/png;base64,', '');
var param = { imageData: mergedImage };
$http({
method: 'POST',
url: '/Admin/MyController/UploadImage',
data: JSON.stringify(param),
dataType: 'JSON',
headers: { 'content-type': 'application/json' }
}).then(function (response) {
alert('Your photos successfully uploaded!');
});
}
});
这是我在mvc controlle文件中的c代码:
[HttpPost]
public ContentResult UploadImage(string imageData)
{
try
{
string fileNameWithPath = Server.MapPath("~/Images/SomeFolder/custom_name.png");
if (!Directory.Exists(fileNameWithPath))
{
using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
}
catch (Exception ex)
{
}
return Content("Uploaded");
}
我只需要将画布保存到“我的项目”文件夹中。似乎您正在获取屏幕截图,因此您的控制器必须工作正常。然而,从这一点上看,我看到: 预期的结果是截图
#capture
元素中的内容。所以他们使用html2canvas(document.querySelector(
#capture)来实现它)
你是说你得到的是整个网页而不是画布。但考虑到您编写了以下内容,我认为这是预期的行为:html2canvas(
document.body,…)
,其中您要求提供body元素的屏幕截图。使用html2canvas,您应该用画布的id替换document.body
但是,您可能不需要这样做。您只需获取画布的图像数据并保存即可。为此,可以使用:constdataurl=canvas.toDataURL()代码>,或者如果您需要其他内容:
这也可能有助于:
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});