Hoy vamos a ver un poco de Javascript. En este artículo vamos a visualizar como podemos arrastrar y soltar elementos mediante la librería jQuery UI en navegadores modernos y luego realizar una captura de pantalla de los elementos en nuestra página para subir la imagen a nuestro servidor con ASP.NET MVC.

Drag and Drop de jQuery UI

Para iniciar vamos a tener un árbol de navidad y unos regalos a su derecha.

1. <div class="inline" id="tree">
2.     <img src="~/blog/Content/img/tree.png" />
3. </div>
4. <div class="inline">
5.     <h2>Regalos de Navidad</h2>
6.     <div id="gifts">
7.         <img src="~/blog/Content/img/gift2.gif" />
8.         <img src="~/blog/Content/img/gift3.gif" />
9.         <img src="~/blog/Content/img/gift4.gif" />
10.         <img src="~/blog/Content/img/gift5.gif" />
11.         <img src="~/blog/Content/img/gift6.gif" />
12.     </div>
13.     <a id="shootImage" href="#">Capturar Imagen</a>
14. </div>

La idea es que vamos a agarrar los regalos de la lista y los soltaremos en nuestro árbol de navidad. Con jQuery UI es muy fácil realizar esto, permitiendo que de nuestra lista podamos agarrar y soltar un mismo regalo las veces que nosotros deseemos:

1. <script type="text/javascript">
2.     $("#gifts img").draggable({
3.         helper: 'clone',
4.         revert: 'invalid',
5.         containment: 'window',
6.         appendTo: document.body
7.     });

Como podemos observar estamos clonando al elemento en el momento de agarrarlo, pero al soltarlo en nuestro árbol este se pierde, por lo cual debemos permitirle al árbol que se inserten los regalos en la posición donde se suelten:

1. $("#tree").droppable({
2.     drop: function (event, ui) {
3.         //El regalo ha sido arrastrado al arbol
4.         ui.draggable.clone().appendTo(this).css({ position: "absolute", top: ui.position.top, left: ui.position.left });
5.     }
6. });

Podemos observar como eficazmente soltamos nuestros regalos en el árbol y estos quedan ubicados en esa posición

Ahora haremos una captura de pantalla de nuestro árbol con nuestros regalos para pedírselos al niño Dios. Para esto existe una librería muy buena llamada html2canvas que nos permite mediante Javascript obtener el canvas correspondiente de nuestros elementos en nuestra página web. Y ya con el canvas es muy fácil obtener el Blob (el cuál es una colección de datos binarios que en nuestro caso hacen referencia a nuestra imagen) y mediante un POST subir la imagen a nuestro servidor mediante una Acción de nuestro Controlador.

1.     function dataURLtoBlob(dataURL) {
2.         // Decode the dataURL   
3.         var binary = atob(dataURL.split(',')[1]);
4.         // Create 8-bit unsigned array
5.         var array = [];
6.         for (var i = 0; i < binary.length; i++) {
7.             array.push(binary.charCodeAt(i));
8.         }
9.         // Return our Blob object
10.         return new Blob([new Uint8Array(array)], { type: 'image/png' });
11.     }
12.     $("#shootImage").on("click", function (e) {
13.         e.preventDefault();
14.         html2canvas($("#tree"), {
15.             onrendered: function (canvas) {
16.                 // Get our file
17.                 var file = dataURLtoBlob(canvas.toDataURL());
18.                 // Create new form data
19.                 var fd = new FormData();
20.                 // Append our Canvas image file to the form data
21.                 fd.append("NameImage", file);
22.                 // And send it
23.                 $.ajax({
24.                     url: "@Url.Action("FileUpload")",
25.                     type: "POST",
26.                     data: fd,
27.                     processData: false,
28.                     contentType: false,
29.                 }).done(function (response) {
30.                     alert(response);
31.                 });
32.             }
33.         });
34.     });
35. </script>

En la Acción de nuestro Controlador únicamente observamos si recibimos el archivo y procedemos a guardarlo en el Servidor de una manera muy fácil.

1. [HttpPost]
2. public JsonResult FileUpload()
3. {
4.     var file = Request.Files[0];
5.     if (file != null && file.ContentLength > 0)
6.     {
7.         try
8.         {
9.             file.SaveAs(HttpContext.Server.MapPath("~/blog/Images/") + "prueba.jpg");
10.             return Json("La imagen fue guardada con exito!");
11.         }
12.         catch (Exception)
13.         {
14.             return Json("Ocurrio un error guardando la imagen..");
15.         }               
16.     }
17.     else
18.     {
19.         return Json("No se pudo guardar la imagen..");
20.     }
21. }

Espero que les haya gustado el ejemplo y una Feliz Navidad! :D