 |
| Interfaz visual del servidor de imagenes |
Luego de dar lectura a las dos entradas anteriores, y entender en que consiste la creación y consumo de un web services, podemos proseguir. En este caso, vamos a crear un servicio completo de subida de imágenes al servidor usando esta metodología de trabajo y entendiendo ciertas características del mismo. Primero, entendiendo que si vamos a subir una imagen al servidor haciendo uso de un REST API, es necesario que la imagen sea un texto, sino, como envías una imagen en un objeto de este estilo, y se preguntaran, en serio se puede hacer esto? codificar una imagen a texto? Y la verdad es que si, se puede, y de esta herramienta tan preciada haremos uso hoy.
Antes de comenzar, cabe destacar que al final del post dejare un demo y un link para descargar los archivos. Tenemos 4 archivos esenciales que se basan en la siguiente estructura, cabe acotar que no son los únicos archivos incluidos dentro del directorio puesto a que tengo incluida también ciertas librerías de diseño y dinamismo, entre ellas angularJS y Materialize para CSS, pero, en el siguiente esquema, solo nos centraremos en los archivos que modificaremos, el resto de los archivos podrán encontrarlos en el enlace de descarga del proyecto completo
- css
- custom.css
- js
- custom.js
- upload
- index.html
- server.php
css/custom.css
Este código no requiere mucha explicación, aunque haremos uso del framework de diseño Materialize, necesitaremos definir los siguientes estilos para ciertos elementos
body {
background-color: #fefefe;
}
#imgCont {
background:#eeeeee;
width:auto;
height:300px;
padding: 5px 5px 5px 5px;
border: 1px solid #cccccc;
margin-top:10px;
overflow: auto;
}
#imgCont img {
width:90px;
border:1px solid #bbbbbb;
margin-right:5px;
transition:all ease .2s;
-webkit-transition:all ease .2s;
}
#imgCont img:hover {
opacity:.8;
transition:all ease .2s;
-webkit-transition:all ease .2s;
}css/custom.js
Aquí empieza la función, si bien no podemos enviar una imagen como tal a un servicio web, si lo podemos hacer si codificamos la imagen, en este caso, haremos uso de base64, la cual es una codificación que tiene la capacidad de convertir cualquier dato definido a nivel de bytes en un formato seguro de transportar por Internet como lo son los caracteres ASCII, es decir, no solo sirve para codificar imágenes, sirve para codificar cualquier archivo, música, vídeos, documentos, o simplemente, cualquier cadena de texto o carácter que se represente en bytes, es decir, puede transformar todo lo que sea recurso digital. En nuestro controlador de imagen en angular simplemente definimos la función encodeImageFileAsURL(); la cual se encarga de hacer todo el trabajo de codificación, y luego la cadena es enviada al web services a través de un objeto.
var app = angular.module('crud',[]);
// Controlador principal de nuestra pagina
app.controller('mainCtrl', function($scope,$http) {
$scope.dominio = "http://localhost/imagenes/";
$scope.message = 'Ejemplo';
$scope.subtitle = "Subir una imagen haciendo uso de API REST";
$scope.imageJSON = {};
$scope.enlaces = {};
angular.element(document).ready(function () {
$scope.get();
});
// La funcion post() que hace la solicitud para publicar un nuevo elemento
$scope.post = function() {
$http.post("server.php", $scope.imageJSON)
.then(function (response){
console.log(response);
Materialize.toast(response.data.statusMessage, 4000);
if(response.data.data != null) {
$scope.cargarImagen(response.data.data);
}
$scope.get();
},
function(response) {
// Aqui va el codigo en caso de error
});
}
$scope.get = function() {
$http.get("server.php")
.then(function (response){
console.log(response);
$scope.imagenes = response.data.data;
},
function(response) {
// Aqui va el codigo en caso de error
});
}
$scope.cargarImagen = function(ruta) {
var container = document.getElementById('imgTest');
var newImage = document.getElementById('imagen');
newImage.src = ruta;
container.style.width = 'auto';
container.style.height = 'auto'
container.innerHTML = newImage.outerHTML;
$scope.enlaces.link = $scope.dominio + ruta;
$scope.enlaces.html = "<a href='"+ $scope.dominio + ruta +"'>"+$scope.dominio + ruta+"</a>";
$scope.enlaces.foros = "[IMG]"+$scope.dominio + ruta+"[/IMG]"
}
$scope.encodeImageFileAsURL = function() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
$scope.imageJSON.encodedImage = srcData;
$scope.post();
}
fileReader.readAsDataURL(fileToLoad);
}
}
});server.php
Este archivo trabaja del lado del servidor, en este caso apache, el archivo recibe el texto de la imagen codificada, y luego la pasa a la función save_base64_image();, la cual, no hace mas que analizar la cadena enviada y mediante el uso de herramientas de decodificacion y escritura en el servidor, crea la imagen en el directorio upload del mismo, almacenando asi una imagen con una extensión, y creando la URL especifica del mismo.
<?php
header("Access-Control-Allow-Origin: *");
// Permite la ejecucion de los metodos
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
switch ($_SERVER['REQUEST_METHOD']) {
case 'GET':
$directorio = opendir("./upload"); //ruta actual
$contador = 0;
while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
{
if (!is_dir($archivo))//verificamos si es o no un directorio
{
$listado[$contador] = $archivo;
}
$contador++;
}
$listado = array_values($listado);
if(count($listado)!=0) {
print_json(200, true, $listado);
} else {
print_json(200, "No existen elementos", null);
}
break;
case 'POST':
$content = file_get_contents("php://input");
$array = json_decode($content, true);
$validar = validate($array['encodedImage']);
if($validar==1) {
$imagen = save_base64_image($array['encodedImage'], "upload/IMG_" . strtoupper(md5($array['encodedImage'])));
if($imagen!=null) {
print_json(200, "Completado", $imagen);
} else {
print_json(200, "Este archivo ya existe", null);
}
} else {
print_json(200, "Extension invalida", null);
}
break;
default:
print_json(405, 'Metodo no permitido', null);
break;
}
function validate($string_base64) {
$array = explode(",", $string_base64);
if( ($array[0] == "data:image/jpeg;base64") || ($array[0] == "data:image/gif;base64") || ($array[0] == "data:image/png;base64") ) {
return 1;
} else {
return 0;
}
}
function save_base64_image($base64_image_string, $output_file_without_extentnion, $path_with_end_slash="" ) {
//usage: if( substr( $img_src, 0, 5 ) === "data:" ) { $filename=save_base64_image($base64_image_string, $output_file_without_extentnion, getcwd() . "/application/assets/pins/$user_id/"); }
//
//data is like: data:image/png;base64,asdfasdfasdf
$splited = explode(',', substr( $base64_image_string , 5 ) , 2);
$mime=$splited[0];
$data=$splited[1];
$mime_split_without_base64=explode(';', $mime,2);
$mime_split=explode('/', $mime_split_without_base64[0],2);
if(count($mime_split)==2)
{
$extension=$mime_split[1];
if($extension=='jpeg')$extension='jpg';
//if($extension=='javascript')$extension='js';
//if($extension=='text')$extension='txt';
$output_file_with_extentnion.=$output_file_without_extentnion.'.'.$extension;
}
if(file_exists($output_file_with_extentnion)) {
return null;
} else {
file_put_contents( $path_with_end_slash . $output_file_with_extentnion, base64_decode($data) );
return $output_file_with_extentnion;
}
}
function print_json($status, $mensaje, $data) {
header("HTTP/1.1 $status $mensaje");
header("Content-Type: application/json; charset=UTF-8");
$response['statusCode'] = $status;
$response['statusMessage'] = $mensaje;
$response['data'] = $data;
echo json_encode($response, JSON_PRETTY_PRINT);
}
?>index.html
Esta sera la pagina principal, donde se encuentra toda la interaccion con el usuario, y donde se embeden todos los archivos necesarios para el funcionamiento.<!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
<meta charset="UTF-8">
<title>Rest API Visual Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Incluimos el CND de Materialize CSS -->
<link rel="stylesheet" href="css/materialize.min.css">
<!-- Nuestro CSS personalizado -->
<link rel="stylesheet" href="css/custom.css">
<!-- Incluimos el CND de AngularJS -->
<script src="js/angular.min.js"></script>
<!-- Incluimos el CND de la libreria jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body class="container" ng-controller="mainCtrl">
<div class="row">
<div class="col s12">
<h1>{{message}}</h1>
<p>{{subtitle}}</p>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="row">
<div class="col s12">
<h6><small>Solo JPG, PNG, GIF</small></h6>
<input id="inputFileToLoad" type="file"/>
<button class="btn" ng-click="encodeImageFileAsURL()">Subir</button>
</div>
<div class="col s12">
<div id="imgCont">
<img ng-click="cargarImagen('upload/' + x)" ng-repeat="x in imagenes" src="upload/{{x}}" title="{{x}}" alt="{{x}}">
</div>
</div>
<div class="input-field col s12">
<input id="Link" type="text" placeholder="Enlace directo" class="validate" readonly ng-value="enlaces.link" ng-model="enlaces.link">
</div>
<div class="input-field col s12">
<input id="HTML" type="text" class="validate" placeholder="Codigo HTML" readonly ng-value="enlaces.html" ng-model="enlaces.html">
</div>
<div class="input-field col s12">
<input id="Forum" type="text" class="validate" placeholder="Codigo para foros" readonly ng-value="enlaces.foros" ng-model="enlaces.foros">
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div id="imgTest" class="center-align">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Esperando imagen</p>
<img id="imagen" width="100%" alt="">
</div>
</div>
</div>
<!-- Nuestro codigo JavaScript personal -->
<script src="js/custom.js"></script>
<!-- Incluimos el CND de Materialize JS -->
<script src="js/materialize.min.js"></script>
</body>
</html>Esto es todo, para entender mejor, les voy a dejar una demo y el link de descarga en Github para que lo tengan en su computador
Demo Descargar
![[2] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[2] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I")
