Skip to main content
Aquí agrego el código C# del archivo "video.asp.cs":
Origen Enlace
Jorge
  • 11
  • 2

Ahora adjunto el archivo "video.aspx.cs" que contiene la función GrabaFoto.:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    using System.Diagnostics;
    using System.Globalization;
    using System.IO;
    using System.Reflection;
    using System.Runtime.CompilerServices;
    using System.Security;
    using System.Text;
    using System.Threading.Tasks;
    using Microsoft.VisualBasic;
    using System.Data;
    using System.Data.OleDb;
    using System.Drawing;
    using System.Drawing.Design;
    using Newtonsoft.Json;
    namespace TomarFoto
    {
       public partial class video : System.Web.UI.Page
       {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            [WebMethod]

            public static void GrabaFoto(string data)
            {
                Guid id = Guid.NewGuid();
                string path = HttpContext.Current.Server.MapPath("~/images/" 
                   + id.ToString() + ".png");
                byte[] binaryData = Convert.FromBase64String(data);
                FileStream file = new FileStream(path, FileMode.Create);
                BinaryWriter bw = new BinaryWriter(file);
                bw.Write(binaryData);
                bw.Close();
           }
       }
   }

Ahora adjunto el archivo "video.aspx.cs" que contiene la función GrabaFoto.:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    using System.Diagnostics;
    using System.Globalization;
    using System.IO;
    using System.Reflection;
    using System.Runtime.CompilerServices;
    using System.Security;
    using System.Text;
    using System.Threading.Tasks;
    using Microsoft.VisualBasic;
    using System.Data;
    using System.Data.OleDb;
    using System.Drawing;
    using System.Drawing.Design;
    using Newtonsoft.Json;
    namespace TomarFoto
    {
       public partial class video : System.Web.UI.Page
       {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            [WebMethod]

            public static void GrabaFoto(string data)
            {
                Guid id = Guid.NewGuid();
                string path = HttpContext.Current.Server.MapPath("~/images/" 
                   + id.ToString() + ".png");
                byte[] binaryData = Convert.FromBase64String(data);
                FileStream file = new FileStream(path, FileMode.Create);
                BinaryWriter bw = new BinaryWriter(file);
                bw.Write(binaryData);
                bw.Close();
           }
       }
   }
Origen Enlace
Jorge
  • 11
  • 2

Tengo problemas al grabar un archivo de imagen en servidor asp.net

Tengo una aplicación web que necesita grabar una foto tomada desde una tablet. El javascript funciona bien hasta tomar la foto, pero al enviarla al servidor utilizando ajax se va por la opción de error y me dice que hay un "parseerror".

El javacript funciona bien hasta el $ajax. Cuando entra a ejecutar esta parte se va por la parte de error. El error me dice que el JSON tiene un error de formato en la linea 3 columna 1.

Aquí adjunto el código de lo que estoy haciendo:

    var width = 320;
    var height = 0;
    var dispositivos = [];
    var streaming = false;
    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton = null;
    var videoSelect = null;
    var contador = 0;

    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');
    videoSelect = document.getElementById('select_video');

    video.addEventListener('canplay', function (ev) {
       if (!streaming) {
           height = video.videoHeight / (video.videoWidth / width);

           if (isNaN(height)) {
              height = width / (4 / 3);
           }

           video.setAttribute('width', width);
           video.setAttribute('height', height);
           canvas.setAttribute('width', width);
           canvas.setAttribute('height', height);
           streaming = true;
      }
   }, false);

   startbutton.addEventListener('click', function (ev) {
       takepicture();
       ev.preventDefault();
   }, false);

   clearphoto();

   function clearphoto() {
        var context = canvas.getContext('2d');
        context.fillStyle = "#AAA";
        context.fillRect(0, 0, canvas.width, canvas.height);
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
   }

   function takepicture() {
         var context = canvas.getContext('2d');
         if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video, 0, 0, width, height);
            var imagen = canvas.toDataURL('image/png');
            var data = canvas.toDataURL();
            data = data.replace('data:image/png;base64,', '');
            photo.setAttribute('src', imagen);
            $.ajax({
                type: "POST",
                url: "video.aspx/GrabaFoto",
                data: '{"data" : "' + data + '"}',
                dataType: "json",
                contentType: 'aplication/json; charset=utf-8',
                success: function (respuesta) {
                      //alert('Imagen grabada en el disco');
                      console.log(respuesta);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                      alert("Status: " + textStatus);
                      alert("Error: " + errorThrown);
                }
          });
          } else {
                clearphoto()
          }
      }

   $(document).ready(function () {
       $("button.cargar").click(function () {
           navigator.mediaDevices.enumerateDevices().then(function (devices) {
               for (var i = 0; i !== devices.length; ++i) {
                   if (devices[i].kind === 'videoinput') {
                       dispositivos.push(devices[i]);
                    };
               };
               if (dispositivos.length > 0) {
                   for (var i = 0; i !== dispositivos.length; ++i) {
                       const option = document.createElement('option');
                       option.value = dispositivos[i].deviceId;
                       option.text = dispositivos[i].label;
                   };
               };
                const camera = dispositivos[dispositivos.length - 1];
                navigator.mediaDevices.getUserMedia({
                video: {
                     deviceId: camera.deviceId,
                     facingMode: ['user', 'environment'],
                     height: { ideal: 1080 },
                     width: { ideal: 1920 }
                }
               }).then(function (stream) {
                  video.srcObject = stream;
                  video.play();
               })
          });
      });
    });

El codigo HTML es el siguiente:

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

   <!DOCTYPE html>

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
   </head>
   <body>
        <section class="content">
    
             <div class="row">
             <div class="col-md-6">
                  <video id="video">Video no habilitado</video>
                  <button class="cargar" type="button">Reproducir video</button>
                  <canvas id="canvas"></canvas>
             </div>
                <div class="col-md-6">
                    <img id="photo" alt="La pantalla capturada aparecerá aquí">
                    <button class="btn btn-primary" id="startbutton">Tomar Foto</button>
                </div>
       
             </div>
       </section>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script src="script.js"></script>
   </body>
   </html>