Caros,
Abaixo tenho um codigo que salva a imagem do canvas ser for um desenho, se for uma imagem de webcam não faz o postback !
qual o problema ?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="z_webcam.aspx.cs" Inherits="Portaria.z_webcam" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML>
<head>
<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>
<script type="text/Javascript">
function drawShapes() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(0, 0, 100, 200);
context.beginPath();
context.lineWidth = "4";
context.strokeStyle = "Green";
context.fillStyle = "Yellow";
context.arc(150, 100, 50, 20, Math.PI * 2, false);
context.stroke();
context.fill();
}
</script>
</head>
<body onload="drawShapes()">
<video id="player" autoplay="autoplay" width="270" height="200"></video>
<button id="capture">Capturar</button>
<canvas id="myCanvas" width="200" height="200"></canvas>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<script type="text/javascript">
/// begin of camera display to screen
/// and capture to canvas
var player = document.getElementById('player');
var snapshotCanvas = document.getElementById('myCanvas');
var captureButton = document.getElementById('capture');
var handleSuccess = function (stream) {
player.srcObject = stream;
};
captureButton.addEventListener('click', function () {
var context = myCanvas.getContext('2d');
context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
});
navigator.mediaDevices.getUserMedia({ video: true }).then(handleSuccess);
/// end of camera display & capture
// 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: 'z_webcam.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
});
});
</script>
</body>
</html>
abaixo o webservices..
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Portaria
{
public partial class z_webcam : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string teste = "";
teste = "asdf";
}
}
[ScriptService]
public partial class z_webcam : System.Web.UI.Page
{
static string path = @"D:\temp\";
[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();
}
}
}
}
}
