在drawImage、C#、AJAX、ASP.NET之后将图像从画布保存到Web服务器
Saving image to webserver from a canvas after drawImage, C#, AJAX, ASP.NET
在使用视频控件使用drawImage方法填充画布后,我在从画布控件保存png或jpg图像时遇到了问题。我大致知道问题可能在哪里,但我不确切。根据我的发现,问题可能在于如何从视频控件中获取图像(通过网络摄像头拍摄快照)并加载到画布上。我认为问题存在的原因是,当我在拍摄视频快照之前尝试保存画布时,我能够将其保存到web服务器。
有人能告诉我我的代码不工作吗?因为我可以从视频中加载并绘制图像到画布,但当我尝试保存/上传图像时,我无法将其转换为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
相关文章:
- 如何将getJson的响应保存在全局变量中
- 按下按钮时保存cookie
- 如何使用 Angular JS 将数据保存在数据库中
- 子字符串/正则表达式以获取字符串中保存的 SRC 值
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 是否可以在浏览器中使用纯JavaScript保存音频流
- 如何将多个画布保存为一个图像
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- 保存数组javascript
- 保存尝试保存字段/列,但不保存值
- 我的文档何时使用猫鼬保存功能保存
- 用户保存未保存且没有错误
- 阻止从网站保存图像(保存整个页面)
- 按单元格而不是按行保存#:IPython %保存魔法:有办法吗?
- 保存没有“保存”按钮的Iframe内容colourbox
- 数据控制中保存未保存数据的策略
- 烬自动保存排队保存请求
- 在保存之前解析重复的行保存后保存
- 如何使保存按钮保存图像上的视频HTML5