Fatal编程技术网
  • javascript/
  • Javascript 在drawImage、C#、AJAX、ASP.NET之后从画布将图像保存到Web服务器

Javascript 在drawImage、C#、AJAX、ASP.NET之后从画布将图像保存到Web服务器

javascript c# asp.net ajax canvas

Javascript 在drawImage、C#、AJAX、ASP.NET之后从画布将图像保存到Web服务器,javascript,c#,asp.net,ajax,canvas,Javascript,C#,Asp.net,Ajax,Canvas,在使用视频控件使用drawImage方法填充画布后，我一直在从画布控件保存png或jpg图像时遇到问题。我大致知道问题可能出在哪里，但我不太清楚。据我所知，问题可能在于如何从视频控件（通过网络摄像头拍摄快照时）抓取图像并加载到画布上。我认为问题的原因是，当我在拍摄视频快照之前尝试保存画布时，我能够保存到web服务器 有人能告诉我我的代码不工作吗？因为我能够将视频中的图像加载并绘制到画布上，但在尝试保存/上载图像时，我无法将其转换为Base64字符串 <%@ Page Language="C

在使用视频控件使用drawImage方法填充画布后，我一直在从画布控件保存png或jpg图像时遇到问题。我大致知道问题可能出在哪里，但我不太清楚。据我所知，问题可能在于如何从视频控件（通过网络摄像头拍摄快照时）抓取图像并加载到画布上。我认为问题的原因是，当我在拍摄视频快照之前尝试保存画布时，我能够保存到web服务器

有人能告诉我我的代码不工作吗？因为我能够将视频中的图像加载并绘制到画布上，但在尝试保存/上载图像时，我无法将其转换为Base64字符串

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"   Inherits="WebApplication11.WebForm1" %>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Saving Canvas to .png file on the server</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"           
    temp_src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"     type="text/javascript"></script>
<script type="text/Javascript" language="Javascript">
    function LoadObjects() {
        var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function (error) {
        console.log("Video capture error: ", error.code);
    };
    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function (stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            //video.src = window.webkitURL.createObjectURL(stream);
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
        navigator.mozGetUserMedia(videoObj, function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}
</script>
</head>
<body onLoad="LoadObjects()">
<canvas id="myCanvas" width="640" height="480"></canvas>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<video id="video" width="640" height="480" autoplay=""></video>
<input type="button" id="snap" name="snap" value="Snap Photo" />
<script type="text/javascript">
    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        var imgString = image.replace(/^data:image\/(png|jpg);base64,/, "");

        return image;
        //return imgString;
    }
    $(document).ready(function () {
     $("#btnSave").click(function () {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         image = context.toDataURL("image/png");
         image = image.replace(/^data:image\/(png|jpg);base64,/, "");
         image = image.replace('data:image/png;base64,', '');

          $.ajax({
              type: 'POST',
              dataType: 'json',
              url: 'WebForm1.aspx/UploadImage',
              //data: {"imageData" :  image },
             // data: '{"imageData" : "' + canvas.toDataURL("image/png").replace('data:image/png;base64,', '') + '" }',
             data: '{"imageData" : "'+image+'" }',
             contentType: 'application/json; charset=utf-8',
             success: function (msg) {
                  alert('Image saved successfully !');
             }

        });
     });
     $(function () {
         $("#snap").click(function () {
             var canvas = document.getElementById("myCanvas");
             var context = canvas.getContext("2d");
             var video = document.getElementById("video");
             context.drawImage(video, 0, 0, 640, 480);              
            });
     });
});
</script>
</body>
</html>
代码如下：

在网页上：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Saving Canvas to .png file on the server</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<canvas id="myCanvas" width="192" height="144"></canvas>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<video id="video" width="192" height="144"></video>
<input type="button" id="snap" name="snap" value="Snap Photo" />
<p id="pngHolder">
</p>
</form>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
// Send the canvas image to the server.
$(function(){
    $("#btnSave").click(function () {
        var image =     document.getElementById("myCanvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');
        $.ajax({
            type: 'POST',
            url: '/WebForm1.aspx/UploadImage',
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });
    });
});
$(function () {
    $("#snap").click(function () {
        var video = document.getElementById("video");
        context.drawImage(video, 0, 0, 192, 144);
    });
}); 
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
        var video = document.getElementById("video"),
         videoObj = { "video": true },
         errBack = function (error) {
             console.log("Video capture error: ", error.code);
         };
        // Put video listeners into place
        if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function (stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function (stream) {
                //video.src = window.webkitURL.createObjectURL(stream);
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
}, false);
</script>
</body>
</html>
希望这对未来的人们有所帮助：）-Yegor除了
context.toDataURL（“image/png”）以外，没有阅读所有内容不起作用，你应该在控制台中有一个错误…@kaido谢谢你，我正在尝试合并来自和的两个不同项目，以便能够为我的应用程序捕获配置文件图片。因此，我发现当我将视频提要和图像提要从640px乘以480 px更改为200px乘以200px时，它起作用了。这让我不禁要问，有什么东西可以转换成更大的基串吗？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Saving Canvas to .png file on the server</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<canvas id="myCanvas" width="192" height="144"></canvas>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<video id="video" width="192" height="144"></video>
<input type="button" id="snap" name="snap" value="Snap Photo" />
<p id="pngHolder">
</p>
</form>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
// Send the canvas image to the server.
$(function(){
    $("#btnSave").click(function () {
        var image =     document.getElementById("myCanvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');
        $.ajax({
            type: 'POST',
            url: '/WebForm1.aspx/UploadImage',
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });
    });
});
$(function () {
    $("#snap").click(function () {
        var video = document.getElementById("video");
        context.drawImage(video, 0, 0, 192, 144);
    });
}); 
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
        var video = document.getElementById("video"),
         videoObj = { "video": true },
         errBack = function (error) {
             console.log("Video capture error: ", error.code);
         };
        // Put video listeners into place
        if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function (stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function (stream) {
                //video.src = window.webkitURL.createObjectURL(stream);
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
}, false);
</script>
</body>
</html>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;

namespace WebApplication12
{
[ScriptService]
public partial class WebForm1 : System.Web.UI.Page
{
    static string path = @"C:\Users\Yegor\Documents\Visual Studio 2015\Projects\WebApplication12\WebApplication12\Images\";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod()]
    public static void UploadImage(string imageData)
    {
        string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";

        using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
            }

        }

    }
}
}