簡體   English   中英

圖像從Jscript到服務器,而無需使用base64回發

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM