11.- Juegos y Multimedia HTML5 - Cargar archivos del usuario al navegador

Tras unos pocos videotutoriales sobre la etiqueta vídeo, que terminaron con la creación de un reproductor, vamos a ver en ésta y en la siguiente entrega del curso cómo cargar archivos del usuario a nuestra página web y utilizar dichos archivos en ella, como si fueran etiquetas HTML. En ningún momento el servidor recibirá dichos archivos, las operaciones las realizará el ordenador del usuario de la página. Haremos uso de la etiqueta input para conseguir nuestros propósitos.
<input type="file"></input>
También veremos cómo capturar una imagen del canvas para así poderla convertir en una etiqueta HTML de tipo img que el usuario pueda guardar en su ordenador dándole al botón derecho, guardar imagen. El método toDataURL nos ayudará a "sacar instantáneas" del contenido de nuestros canvas.
canvas.toDataURL(); // Formato png
canvas.toDataURL("image/png");
canvas.toDataURL("image/jpeg");
...
Combinando el método toDataURL con el URL() de CSS, podemos utilizar una imagen de un canvas como, por ejemplo, fondo de nuestra página web.
El vídeo dura una media hora y en él se estudian todos estos temas de una forma clara (o por lo menos eso creo yo si nadie dice lo contrario :P).
La aplicación se puede ver en funcionamiento aquí. Está hospedada en un servidor gratuito que no siempre puede estar disponible. Todos los ejemplos del curso están hechos en un único archivo para facilitar la tarea de copy-paste y que podáis probarlos de una forma más cómoda en vuestros ordenadores.



Código del vídeo:
<!DOCTYPE html>
<html>
  <head>
    <title>TileImageCreator</title>
    <meta charset="UTF-8">
    <meta name="author" content="http://programmingheroes.blogspot.com.es">
    <style>
        
        @font-face {
            font-family : "beautiful";
            src: url("fonts/the beautiful ones.woff") format("woff"),
                url("fonts/the beautiful ones.ttf") format("truetype");
        }
        
        body {
            background-color: #F91;
            text-align: center;
        }
        
        div div {
            background-color: rgba(100,100,0,0.2);
            border-radius: 10px;
            box-shadow: 0px 0px 10px black;
        }
        
        h1 {
            font-family: "beautiful";
            font-size: 5em;
            color: rgb(60, 60, 60);
        }
        
        h3 {
            color: rgb(70, 70, 70);
        }
        
        #img img {
            margin-top: 5px;
            height: 100px;
        }
        
        #tileImg img {
            margin-top: 5px;
            height: 200px;
        }
        
    </style>
    <script>
        var canvas, ctx;
        
        window.addEventListener('load', function () {
            if (!(window.File && window.FileReader
                && window.FileList && window.Blob)) {
                    alert("El API de archivos no es soportado totalmente"
                        +" en este navegador.");
            }
            canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            document.getElementById("files").addEventListener("change",
                fileChange, false);
        });
        
        function fileChange(e) {
            var files = e.target.files;
            for (var i=0; i<files.length; i++) {
                var f = files[i];
                console.log(f.name+" "+f.type+" "+f.size+" "+
                    f.lastModifiedDate.toLocaleDateString());
                if (f.type.indexOf("image") == -1) {
                    continue;
                }
                var reader = new FileReader();
                reader.addEventListener("load", function (event) {
                    var divImg = document.getElementById("img");
                    var img = document.createElement("img");
                    img.addEventListener("load", function () {
                        divImg.replaceChild(img, divImg.childNodes[1]);
                        var divTile = document.getElementById("tileImg");
                        var tileImg = createTile(img);
                        divTile.replaceChild(tileImg,divTile.childNodes[1]);
                        //document.body.style.backgroundImage=
                        //    "url("+canvas.toDataURL()+")";
                    });
                    img.src = event.target.result;
                });
                reader.readAsDataURL(f);
            }
        }
        
        function createTile(img) {
            var w = img.width, h = img.height;
            canvas.width = w*2;
            canvas.height = h*2;
            
            ctx.drawImage(img, 0, 0);
            
            ctx.save();
            ctx.translate(w*2, 0);
            ctx.scale(-1, 1);
            ctx.drawImage(img, 0, 0);
            ctx.restore();
            
            ctx.save();
            ctx.translate(0, h*2);
            ctx.scale(1, -1);
            ctx.drawImage(img, 0, 0);
            ctx.restore();
            
            ctx.save();
            ctx.translate(w*2, h*2);
            ctx.scale(-1, -1);
            ctx.drawImage(img, 0, 0);
            ctx.restore();
            
            var img = new Image();
            img.src = canvas.toDataURL("image/jpeg"); // png formato
                                                      // por defecto
            return img;
        }
        
    </script>
  </head>
  <body>
      <noscript>
        No tiene habilitado JavaScript. Debería habilitarlo para poder
        disfrutar al completo de los contenidos de esta página.
      </noscript>
      <div>
        <div id="title">
            <h1>TileImageConverter!</h1>
        </div>
        <div>
            <h3>Convierte cualquier imagen en una textura</h3>
            <input type="file" id="files"/>
            <output id="list" for="files"></output>
        </div>
        <br />
        <div id="img">
            <h3>Aquí aparecerá la imagen seleccionada</h3>
        </div>
        <br />
        <div id="tileImg">
            <h3>Aquí aparecerá la imagen modificada</h3>
        </div>
      </div>
  </body>
</html>

Índice del curso

No hay comentarios :

Publicar un comentario