如何使用c＃/ javascript将画布图像保存到服务器 [英] how to save canvas image to server using c# / javascript
问题描述
我试图将图像从画布保存到服务器，当我按下上传按钮时，它只使用两个按钮1重置canvas.im，将画布保存到隐藏字段，2上传画布。
javascipt保存：
saveButton.addEventListener（click，function（event）{
if（signaturePad.isEmpty（））{
alert（请先提供签名。）;
}否则{
var signatureData = signaturePad.toDataURL（）;
document.getElementById（hdnfld）。value = signatureData;
alert（signature Saved！）;
}
返回false;
}）;
Javascript上传：
< script type =text / javascript>
function UploadPic（）{
//生成图片数据
var Pic;
Pic.toDataUR L（image / png）= document.getElementById（'hdnfld'）。value;
Pic = Pic.replace（/ ^ data：image \ /（png | jpg）; base64， /，）
//将图像数据发送到服务器
$ .ajax（{
类型：'POST'，
url：'Signature.aspx / UploadPic'，
data：'{imageData：'+ Pic +'}'，
contentType：'application / json; charset = utf-8'，
dataType：'json'，
成功：函数（msg）{
alert（完成，图片已上传。）;
}
}）;
}
< / script>
保存按钮：
保存
上传按钮：
< button onclick =javascript：UploadPic（）;返回false ;>将图片上传到服务器< / button>
c＃code：
public void UploadImage（string imageData）
{
string Pic_Path = HttpContext.Current.Server.MapPath（Signature.png）;
using（FileStream fs = new FileStream（Pic_Path，FileMode） .Create））
{
使用（BinaryWriter bw = new BinaryWriter（fs））
{
byte [] data = Convert.FromBase64String（imageData）;
bw.Write（data）;
bw.Close（）;
}
}
}
.ajax（{
类型：'POST'，
url：'Signature.aspx / UploadPic'，
data：'{imageData：'+ Pic +'}'，
contentType：'application / json; charset = utf-8'，
dataType：'json'，
成功：函数（msg）{
alert（完成，图片已上传。）;
}
}）;
}
< / script>
保存按钮：
保存
上传按钮：
< button onclick =javascript：UploadPic（）;返回false ;>将图片上传到服务器< / button>
c＃code：
public void UploadImage（string imageData）
{
string Pic_Path = HttpContext.Current.Server.MapPath（Signature.png）;
using（FileStream fs = new FileStream（Pic_Path，FileMode） .Create））
{
使用（BinaryWriter bw = new BinaryWriter（fs））
{
byte [] data = Convert.FromBase64String（imageData）;
bw.Write（data）;
bw.Close（）;
}
}
}
im trying to save a image to server from canvas, when i press the upload button it just resets the canvas.im using two buttons 1 to save the canvas to a hidden field, 2 to upload the canvas.
javascipt save :
saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
var signatureData = signaturePad.toDataURL();
document.getElementById("hdnfld").value = signatureData;
alert("signature Saved!");
}
return false;
});
Javascript upload:
<script type="text/javascript">
function UploadPic() {
// generate the image data
var Pic;
Pic.toDataURL("image/png") = document.getElementById('hdnfld').value;
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'Signature.aspx/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
</script>
Save Button:
Save
upload Button:
<button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button>
c# code:
public void UploadImage(string imageData)
{
string Pic_Path = HttpContext.Current.Server.MapPath("Signature.png");
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
.ajax({
type: 'POST',
url: 'Signature.aspx/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
</script>
Save Button:
Save
upload Button:
<button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button>
c# code:
public void UploadImage(string imageData)
{
string Pic_Path = HttpContext.Current.Server.MapPath("Signature.png");
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
这篇关于如何使用c＃/ javascript将画布图像保存到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
