在使用视频控件通过drawImage方法填充 Canvas 后，我在从 Canvas 控件保存png或jpg图像时遇到了问题。我大概知道问题出在哪里，但不确切知道。据我发现，问题可能在于如何从视频控件中抓取图像(通过网络摄像头拍摄快照时)并将其加载到 Canvas 上。我认为问题存在的原因是，当我在拍摄视频快照之前尝试保存 Canvas 时，我能够保存到网络服务器。
有人可以告诉我我的代码不起作用吗？因为我能够从视频加载图像并将其绘制到 Canvas 上，但当我尝试保存/上传图像时，无法将其转换为 base64string。
<%@ 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>
ajax 调用背后的代码......
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;
namespace WebApplication11
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
[ScriptService]
public partial class WebForm1 : System.Web.UI.Page
{
static string path = @"C:\Users\Yegor\Documents\visual studio 2015\Projects\WebApplication11\WebApplication11\Images\";
[WebMethod()]
public static void UploadImage(string imageData)
{
string fileNameWithPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
fs.Close();
}
}
}
}
最佳答案
这是有效的代码:
在网页上:
<!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>
AJAX 调用背后的代码:
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();
}
}
}
}
}
希望这对将来的人有帮助:) -Yegor
关于javascript - 在drawImage、C#、AJAX、ASP.NET之后将图像从 Canvas 保存到网络服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36514087/