1
drawImageメソッドを使用してビデオコントロールを使用してキャンバスを塗りつぶした後、キャンバスコントロールからpngまたはjpgイメージを保存する際に問題が発生しています。 。私はおおよそ問題がどこにあるかも知っていますが、正確には分かりません。私が見つけたところでは、画像がビデオコントロールから（ウェブカメラを通したスナップショットを撮ったとき）、キャンバスにロードされた状態でどのように問題になるかが分かりました。問題があると思う理由は、ビデオスナップショットを撮る前にキャンバスを保存しようとすると、Webサーバーに保存できたということです。drawImage、C＃、AJAX、ASP.NETの後にキャンバスからWebサーバーにイメージを保存する
私のコードが動作していないことを誰かに教えてもらえますか？私は画像をキャンバスにロードして描画することができますが、画像を保存/アップロードしようとするとbase64stringに変換できません。そのAJAX呼び出しの背後に
<%@ 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>
コード....ここ
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();
}
}
}
}
はそれをすべてが、 'context.toDataURL（「画像/ PNG」）を読んでいない;'動作しません、あなたは中にエラーが発生している必要がありますコンソール... – Kaiido
@Kaiidoありがとう、私はhttps://davidwalsh.name/browser-cameraから2つの異なるプロジェクトを組み合わせようとしています と http://www.dotnetfunda.com/articles/show/1662/saving -html-5-canvas-as-server-using-aspnet 私のアプリケーションのプロフィール画像をキャプチャできるようにする。 – Cels
ビデオフィードと画像フィードを200pxで200pxに640pxから480pxに変更したときに見つかりました。それは私が大きいBaseStringに変換することができる何かがあるのか疑問に私を残す？ – Cels