Empleando Drag and Drop de jQuery UI,

realizando una captura de pantalla y

subiendo nuestra Imagen en ASP.NET
MVC (es-ES)
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.         returnnew 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. publicJsonResult 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 éxito!");
11.         }
12.         catch (Exception)
13.         {
14.             return Json("Ocurrió 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
ASP.NET, es-ES, HTML5, Javascript, JQuery