Imagen en web, escribir encima y guardarla Php

  • Autor Autor HackID1
  • Fecha de inicio Fecha de inicio

HackID1

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas !!.
He estado buscando como mostrar una imagen en mi página web y poder escribir texto encima de esta, para luego tener un botón y poder almacenar esa imagen een una carpeta, y claro la imagen almacena un nombre por defecto en un campo de la Tabla de la Base de DATOS, esto último por PHP.

Pero como puedo hacer para escribir encima de la imagen pero en tiempo real, no se si hace falta Ajax o Jquery o Php.

Lo he conseguido en PHP pero no en tiempo real en la página web. 🙁

Saludos espero me puedan ayudar en algo.

Gracias!!
 
Hola muy buenas,

Como bien sabes php no se trabaja a tiempo real.
Te recomendaría que usaras AJAX para hacer consultas a tiempo real.
Se puede hacer también en jquery, node.js, etc.. todos vienen de JavaScript, pero AJAX es el más recomendado para las consultas web a tiempo real.

Saludos.
 
Exacto pero como podría hacer esa parte de poder mostrar la imagen y modificarla colocando texto encima de ella en alguna parte de la imagen.
Es que he buscado varios tutoriales como este pero no he podido llevarlos a cabo correctamente, mira un ejemplo aunque bastante avanzada la paleta de dibujo.

Clic en el DEMO:
Paleta de dibujo tipo paint, con canvas |Oscar de los Santos


EN PHP logre escribir en la imagen insertando el texto en un <input type="text" > pero claro no se ve visualmente la modificación hasta que guardas la imagen. :grumpy: y eso es lo que necesito conseguir.
Gracias por tu interés!
 
Mira a la hora de escribir en el input haz una carga a tiempo real haciendo referencia al contenido del input (en este caso el texto) y mostrando la imagen.

¿Dispones de tu código para hacer la carga a tiempo real para ayudarte más fácilmente?

Saludos!
 
Si tengo el código del formulario, te pongo la parte de la imagen.


HTML: 
<fieldset>
<form action = 'procesar.php' method = 'post' enctype = 'multipart/form-data'>
			<legend><strong>&nbsp; Seleccione la imagen que desea estampar con el texto.&nbsp;</strong></legend>
								
					 <br/><br/>
					
					Imagen: <input type = "file" name = "imagen" required='required'/><br/><br/>
					Texto sobre la imagen: <input type = "text" name = "texto" maxlength="9" required='required'/><br/><br/>
					Nombre para la imagen: <input type = "text" name = "nombre_img" required='required'/><br/><br/>
					Posici&oacute;n del texto: <select name="posicion" required='required'>
										<option value="izquierda">Superior Izquierda</option>
										<option value="derecha">Superior derecha</option>
										<option value="centro">Superior Centrada</option>
										<option value="inferior">Inferior Centrada</option>
									</select><br/><br/>

					<!-- <input type = "submit" value = "Guardar Imagen" name="guardar" /> -->
				<!--</form> --> <br/><br/>
				
					</fieldset>

<input name="enviar" type="submit" value="Guardar"/>
</form>


Y esta pagina procesa esos campos y el resto que no te los posteo para no alargar el código.
NOTA: Por medio de if elseif, else uso para conocer la posicion, si es derecha, izquierda, centro o inferior. No te lo posteo el codigo porque es repetitivo, con esta parte funcionaria seleccionado izquierda.


-- procesar.php
PHP: 
<?php

/*Procesar imagen*/

header("Content-type: image/png");

$cadena = $_POST["texto"];
$posicion = $_POST["posicion"];
$nombre = $_POST['nombre_img'];
$enviar = $_POST['enviar'];

	if ($posicion == "izquierda") {
		
		$enviar = $_POST['enviar'];

			$codcliente = $_POST['codcliente'];
			$tipo_trabajo = $_POST['tipo_trabajo'];
			$estado = $_POST['estado'];
			$observacion = $_POST['observacion'] ;
			$descripcion = $_POST['descripcion'];
			
			$fecha_entrada = $_POST['fecha_entrada'] ;
			// Separar fecha_entrada
			list($dia, $mes, $anio) = explode("-", $fecha_entrada);
				
			//une fecha_alta correctamente como DATE para el campo de la BD.
			$fecha_entrada = $anio . $mes . $dia ;
				
			
			$fecha_entrega = $_POST['fecha_entrega'] ;
			
			// Separar fecha_entrada
			list($dia1, $mes1, $anio1) = explode("-", $fecha_entrega);
				
			//une fecha_alta correctamente como DATE para el campo de la BD.
			$fecha_entrega = $anio1 . $mes1 . $dia1 ;
			
			$precio = $_POST['precio'];
			$pagado = $_POST['pagado'];
			$ac = $_POST['ac'];
			
			/************ imagen visualizacion y creacion ***********/
			$nombre = $nombre."-" . mt_rand(1000, 10000) ; 
			
			$im     = imagecreatefrompng($_FILES["imagen"]["tmp_name"]);
			$color = imagecolorallocate($im, 220, 210, 60);
			$px     = (imagesx($im) - 20 * strlen($cadena)) / 2	;
			imagestring($im, 7, $px, 70, $cadena, $color);
			imagepng($im);		//visualiza en naveg
			imagepng($im, "img/".$nombre.".png");	//guarda imagen en img/esenombre.
			imagedestroy($im);
			
			/**** DATOS DE CONEXION **********/			
			$hotsdb = "localhost"; 	//valor de nuestra BD
			$basededatos = "control3";	//sera el valor de nuestra BD

			$usuariodb = "root";		//sera el valor de nuestra BD
			$clavedb = "";		//sera el valor de nuestra BD


			$conexion_db = mysql_connect("$hotsdb","$usuariodb","$clavedb")
				or die ("Conexión denegada, el Servidor de BD que solicita
						NO EXISTE");
				$db = mysql_select_db("$basededatos", $conexion_db)
				or die ("La Base de Datos <b>$basededatos</b> NO EXISTE");

				
			/**** QUERY **********/				
			mysql_query("INSERT INTO trabajos
									VALUES ('', '$codcliente', '$tipo_trabajo', '$estado', '$observacion',
									'$descripcion', '$precio', '$pagado', '', '$nombre', '$fecha_entrada',
									'$fecha_entrega', '$ac')");
						
			?>
			
			<script language="javascript"> 
			
				window.location="alta_trabajo.php"; 
				alert("Los datos han sido guardados con exito.");
				
			</script>
			
	<?php
		
	}
Como vez la mitad de campos _POST[]; los puedes saltar o borrar, lo único que me necesito es permitir editar una imagen mostrada en la página y escribir en ella ya sea usando Jquery o Ajax, pero no se mucho de estos lenguajes. Si de JScript pero lo básico 🙂 .

Con esto guardo la imagen en la carpeta img/ con el nombre dado. Pero quiero conseguir la edición en tiempo real.

Gracias espero me puedas ayudar, si te hace falta todo el código te lo puedo pasar.
 
Última edición:
Lo que yo haría sería mediante javascript permitir que el usuario haga lo que quiera sobre la imagen, después a la hora de guardar la imagen, cogería el x e y de las posiciones del elemento que el usuario añadió sobre la imagen y lo pondría en la misma mediante PHP.
 
En Javascript??? Me podrías ayudar un poco con ese tema, es que llevo tiempo y aún no doy con la tecla de como resolverlo y ya que dices "Que el usuario puede hacer lo que quiera" eso me parece bien, con poder escribir encima de ella y guardarla me sirve.
Si me puedes ayudar o algún código para probar con lo que dices te agradezco de verdad. 🙂
 
Hola,

Mira en el código coge la variable que se guarda, por ejemplo en tu caso parece ser:

PHP: 
$nombre

Pues con tu código javascript, ajax u cualquier tipo que haga la carga a tiempo real se lo añades y luego lo muestras en pantalla con un "echo".
¿Entiendes? Has que esa variable se recargue a tiempo real, y luego la muestras con un 'echo'.

Saludos!
 
Si eso es lo que quiero conseguir escribir en la imagen en tiempo real, lo que pasa no se como realizar esto en JScript o el lenguaje que sea necesario.
🙁 He buscado y mirado muchas maneras pero en ninguna parte consigo encontrar ningun ejemplo para guiarme.

Gracias por su interés en ayudarme, pero no tengo código en Jscript para realizar esto de tiempo real escribiendo en la imagen.

Tan solo necesito eso mostrar una imagen y de alguna manera poder controlar que se escriba encima de ella y guardar la imagen.

:distant:
 
Mira antes que nada estoy viendo en tu código que nada más seleccionas la imagen y ya estás escribiendo en ella... sin saber que imagen es.

Lo primero que has de hacer es guardar la imagen en la carpeta y db, y luego con el nombre asignado a esa imagen se muestra la imagen y luego se edita.

¿Me entiendes? - Has primero eso que te he dicho, has un formulario y guarda la imagen en la carpeta y en la db. Y luego dependiendo del nombre asignado a esa imagen
muestras la imagen y le añades un formulario para escribir sobre ella. Y ya después te podré ayudar con mostrarlo a tiempo real.

Te digo eso por que tu código está mal en la lógica, está escribiendo sobre una imagen que solo está seleccionada por un input file y esta en la computadora de una persona y no en la carpeta de tu servidor ni base de datos, como vas a visualizar una imagen que no sabes ni cómo es. ¿entiendes la lógica?

Si arreglas eso que te he comentado te puedo echar una mano a visualizar la imagen con el texto a tiempo real.

Saludos!
 
Buenas gracias por tu comentario.
Es decir quieres que la imagen se guarde en la carpeta ejm img/ y además en la BD, para tener una imagen de referencia, y en otro formulario hacer un <img src="rutaimagen" /> para mostrar la imagen en la cual quiero escribir encima a tiempo real ??.
Es eso lo que me dices que corrija? perdona si no entendí bien.

La imagen será una fija y tendrá un ancho y alto fijos es decir siempre el mismo. Sería una camiseta en blanco para todos los trabajos.

Pero una cosa no quiero guardar las imagenes en la BD, porque he leído y el rendimiento baja mucho en las consultas cuando tenga muchas imagenes almacenadas, por eso guardo el nombre que es un prefijo: camiseta-"codtrabajo". así no se repiten.
 
Hola muy buenas,

Bueno según tu código tu lo que haces es seleccionar una imagen de tu computadora y luego la editas con los textos y la guardas. ¿bien?
Pues como vas a obtener una previa de la imagen si la imagen está en la computadora de una persona y no en tu servidor? No se puede adivinar la imagen que yo sepa hasta el momento.

Lo que tendrías que corregir es eso, que primero se guarde la imagen en una carpeta de tu servidor y luego en la base de datos, con un nombre... y luego creas un archivo en el que muestre esa imagen y puedas editarla. Y ya lo demás sería hacerle una carga a tiempo real.

Sobre lo de que si guardas imágenes en la base de datos es ciertamente mentira, ya que en la base de datos solo se guarda una url, osea la dirección de la carpeta donde se encuentra la imagen asín que no baja el rendimiento es igual que un dato normal son letras y números no imágenes.

Saludos!
 
He encontrado otra forma de poder editar la imagen en tiempo real, usando Canvas.

Ahora tengo una imagen puedo dibujar encima de ella y guardarla.

Pero me gustaría poder colocar un texto encima de ella es decir encima del Canvas el cual tiene una imagen de fondo, y ese texto poder moverlo para posicionarlo donde quiera..

Lo único es eso que falta.
Un ejemplo de algo de Canvas con un texto que se puede mover es este.

Edit fiddle - JSFiddle

Ese código funciona, pues eso me gustaría poder insertarlo en mi canvas y luego clic en mi botón de guardar, que guarde la imagen con el texto encima.

Saluds!!
 
Última edición:
Tema solucionado, la respuesta ha sido usando Canvas con JScript.

De esta forma he podido realizar la escritura encima de la imagen.

Saludos a todos!!!.
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro