[英]image from Jscript to server without postback using base64
I have a canvas with an image taken from a webcam. 我有一张画布,上面有从网络摄像头拍摄的图像。 I want to send that image to my server while avoiding any postback.
我想将该图像发送到服务器,同时避免任何回发。 (With a postback, it force the client to validate the use of the webcam everytime they save an image and I don't want that. :( )
(通过回发,它强制客户端每次保存图像时都验证网络摄像头的使用,而我不希望这样做。:()
Here's the Jscript 这是Jscript
function sendPicture() {
event.preventDefault();
var b64 = document.getElementById("canvas").toDataURL("image/png");
b64 = b64.replace('data:image/png;base64,', '');
PageMethods.SaveImage(b64, success, error);
}
function success()
{ console.log("hoorah"); }
function error()
{ console.log("boo"); }
Here's the codebehind which isn't written yet but it doesn't matter since it never reach inside anyways. 这是尚未编写的代码背后的内容,但这并不重要,因为它永远也不会到达内部。
[WebMethod]
public static bool SaveImage(string image)
{
return false;
}
The code never reach the WebMethod because the b64 is way too long. 代码永远不会到达WebMethod,因为b64太长了。 (Over 2000 characters) I tried
(超过2000个字符)我尝试过
var imgObj = new Image();
imgObj.src = b64;
PageMethods.SaveImage(imgObj, success, error);
ain't working. 没有工作。
Help please. 请帮助。 :(
:(
Edit : Forgot to put the page html 编辑:忘记了放置页面的HTML
<div class="formRow">
<input type="button" id="snap" value="Prendre photo" />
<input type="button" id="send" value="Enregistrer Photo" />
<br />
<video id="video" width="320" height="240" autoplay></video>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
I managed to get it done by making a new asp page and sending the b64 by parameter to that page. 我设法通过制作一个新的ASP页面并将b64 by参数发送到该页面来完成该任务。
New page : 新的一页 :
public partial class SaveImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.Form["data"]))
{
string b64 = Request.Form["data"];
byte[] binary = Convert.FromBase64String(b64);
writeToFile(binary);
}
}
public void writeToFile(byte[] array)
{
var fs = new BinaryWriter(new FileStream(Server.MapPath("~") + "/Images/Photo/" + Session["IdParticipantPhoto"].ToString() + ".png", FileMode.Append, FileAccess.Write));
fs.Write(array);
fs.Close();
}
}
Jscript : 脚本:
function sendPicture() {
event.preventDefault();
var b64 = document.getElementById("canvas")
.toDataURL("image/png");
b64 = b64.replace('data:image/png;base64,', '');
console.log("Image " + b64);
$.ajax({
type: 'POST',
url: '/LAN/SaveImage.aspx',
data: { "data": b64 },
success: function (msg) {
alert("Uploaded successfully");
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.