Cuando tenemos un blog o una web, hay veces que queremos identificar las imágenes subidas a nuestro sitio añadiendoles el logo de éste. Esto se puede hacer manualmente con cualquier programa de edición de fotografías (Photoshop, GIMP, etc), pero se puede automatizar y es lo que vamos a ver. Hoy, vamos a ver cómo añadir marcas de agua a nuestras imágenes con Laravel y la libreria Intervention Image.
Primero de todo, lo que vamos a hacer va a ser instalar el paquete Intervention Image:
|
1 |
composer require intervention/image |
Una vez finalice, vamos a añadir el provider y facade al archivo config/app.php:
|
1 2 3 4 5 6 7 8 9 |
'providers' => [ ... Intervention\Image\ImageServiceProvider::class, ], 'aliases' => [ ... 'Image' => Intervention\Image\Facades\Image::class, ], |
Publicamos el archivo de configuración del paquete, ejecutando el siguiente comando:
|
1 |
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5" |
Veremos que se nos generará una archivo en config llamado image.php, ahí podremos indicar el driver que queramos utilizar. Podremos escoger entre «gd» o «imagick». Yo he escogido «imagick».
Ahora vamos a crear el controlador que añadirá la imagen que queramos en la posición que queramos a la imagen subida:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace App\Http\Controllers; use Image; use Illuminate\Http\Request; class WatermarkImageController extends Controller { public function form() { return view('form'); } public function upload(Request $request) { $name = str_random() . '.png'; $image = Image::make($request->image); // indicar la imagen para la marca de agua y la posición $image->insert(public_path('images/logo.png'), 'bottom-right'); $image->save(public_path('images/' . $name)); return redirect()->route('watermark-image-form')->with(['image' => $name]); } } |
He creado dos métodos:
- form: mostrar una vista con el formulario de subida de imágenes.
- upload: generar la imagen nueva con la marca de agua y guardarla. Documentación del método insert.
Creamos la vista con el formulario:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <form method="post" action="{{ route('watermark-image-upload') }}" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group"> <label for="image">Image</label> <input type="file" class="form-control-file" id="image" name="image"> </div> <button type="submit" name="button" class="btn btn-primary">Save</button> </form> @if (session('image')) <hr> <div> <h1>Image Uploaded</h1> <img src="{{ asset('images/' . session('image')) }}" alt=""> </div> @endif </div> </div> </div> @endsection |
Y finalmente creamos las rutas para los métodos anteriores:
|
1 2 3 |
Route::get('/form', 'WatermarkImageController@form')->name('watermark-image-form'); Route::post('/upload', 'WatermarkImageController@upload')->name('watermark-image-upload'); |
Si accedemos desde el navegador a http://localhost:8080/form, veremos el formulario para subir imágenes. Vamos a probarlo:
Nota: La imagen que he escogido para la prueba es https://unsplash.com/photos/s05XKB6jK2c
Pero con el paquete Intervention Image, también podemos añadir texto. Para ello hay que cambiar el controlador y dejarlo así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
... public function upload(Request $request) { $name = str_random() . '.png'; $image = Image::make($request->image); $image->text('Texto', $image->width() - 40, $image->height() - 30, function($font) { $font->file(public_path('fonts/montserrat/Montserrat-Regular.ttf')); $font->size(24); $font->color('#f00'); $font->align('center'); $font->valign('top'); }); $image->save(public_path('images/' . $name)); return redirect()->route('watermark-image-form')->with(['image' => $name]); } ... |
La documentación del método text se puede encontrar aquí.
Y el resultado sería:
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR