[英]image from Jscript to server without postback using base64
我有一張畫布,上面有從網絡攝像頭拍攝的圖像。 我想將該圖像發送到服務器,同時避免任何回發。 (通過回發,它強制客戶端每次保存圖像時都驗證網絡攝像頭的使用,而我不希望這樣做。:()
這是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"); }
這是尚未編寫的代碼背后的內容,但這並不重要,因為它永遠也不會到達內部。
[WebMethod]
public static bool SaveImage(string image)
{
return false;
}
代碼永遠不會到達WebMethod,因為b64太長了。 (超過2000個字符)我嘗試過
var imgObj = new Image();
imgObj.src = b64;
PageMethods.SaveImage(imgObj, success, error);
沒有工作。
請幫助。 :(
編輯:忘記了放置頁面的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>
我設法通過制作一個新的ASP頁面並將b64 by參數發送到該頁面來完成該任務。
新的一頁 :
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();
}
}
腳本:
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.