Mostrando entradas con la etiqueta Imágenes. Mostrar todas las entradas
Mostrando entradas con la etiqueta Imágenes. Mostrar todas las entradas

Dropzone: rescatar la imagen mandanda

Desde el form de la view se envía a una ruta: controller o a un componente de Livewire y para rescatarlo:
<form action="{{ route('admin.product.storeImagenes', $product) }}" method="POST" class="dropzone"id="my-awesome-dropzone">

Y desde el controller o componente Livewire al que apunte esa ruta:
use Illuminate\Support\Facades\Storage;
...
public function storeImagenes(Product $product, Request $request) {
    $request->validate([
       'fichero' => 'required|image|max:2048'
    ]);
    $url = Storage::put('products', $request->file('fichero'));

    $product->images()->create([
       'url' => $url
    ]);
}

Storage::put lo almacena en donde lo tengas configurado enconfig\filesystems.php:
'default' => env('FILESYSTEM_DRIVER', 'public'),

Por ejemplo en este caso lo almacenaría físicamente dentro de la carpeta: C:\xampp\htdocs\miproyecto\public\storage\products

Para el caso de borrar desde la view:
deleteImagen({{ $image->id }})
Y desde el método del controller o del componente livewire:
public function deleteImagen(Image $image) {
    Storage::delete([$image->url]); // eliminarla físicamente
    $image->delete(); // borrar de la BD
    $this->product = $this->product->fresh();
}

EJEMPLO GENERAL DEL DROPZONE:
Dropzone.options.myAwesomeDropzone = {
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
paramName: "fichero",
dictDefaultMessage: "Arrastra aquí las imágenes que quieras subir",
acceptedFiles: "image/*",
maxFilesize: 2, // MB
maxFiles: 4,
complete: function(fichero) {
this.removeFile(fichero);
},
queuecomplete: function() { // se ejecuta cuando se hayan subido todos los q estén en la cola
Livewire.emit('refreshProduct');
},
accept: function(file, done) {
if (file.name == "xxxx") {
done("xxxx");
}
else { done(); }
}
};

Procesar imagen mandada por dropzone

En \composer.json añadir a los require:
"intervention/image": "^2.5",
composer update
composer install

En Laravel 7 no es necesario añadirlo en los providers y alias de \config\app.php

Ya en el FileController.php añadir:
use Intervention\Image\Facades\Image;
use Illuminate\Support\Str;

y en la función store:
$nombre = Str::random(10)."_".$request->file('fichero')->getClientOriginalName();
$ruta = storage_path().'\app\public\imagenes/' . $nombre;
Image::make($request->file('fichero'))
           ->resize(700, null, function ($constraint) { // redimensiona a 700 de ancho
                 $constraint->aspectRatio();
           })
           ->save($ruta);

File::create([
    'url_foto' => 'storage/imagenes/' . $nombre
]);

Añadir plugin de dropzone para subir muchos ficheros a la vez desde una view

En \resources\views\layouts\app.blade.php añadir:
@yield('css_lsg')
@yield('js_lsg')

En la vista q queramos usarlo (por ejemplo create):
@section('css_lsg')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
@endsection
...
@section('js_lsg')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
@endsection

En esa misma view:
<form action="{{ route('admin.files.store') }}" method="POST" class="dropzone" id="my-awesome-dropzone">
</form>

y dentro del @section('js') añadir las propiedades de la subida:
<script>
   Dropzone.options.myAwesomeDropzone = {
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        paramName: "fichero",
        dictDefaultMessage: "Arrastra aquí las imágenes que quieras subir",
        acceptedFiles: "image/*",
        maxFilesize: 0.1,
        maxFiles: 4
  };
</script>


Más información en: https://www.dropzonejs.com/#installation

Imágenes: mostrar imagen en una vista

<table border=1>
@foreach ($productos as $item)
    <tr>
        <td>{{ $item->nombre_producto}}</td>
        <td><img src="{!! asset('images/fotos_productos/'.$item->nom_foto) !!}"></td>
    </tr>
@endforeach
</table>

Imágenes: libreria ImageManagerStatic

En el tratamiento de imágenes para poder usar la librería ImageManagerStatic:

En el composer.json en el require añadir:
"intervention/image": "dev-master"

Ejecutar composer install (si da el warning de The lock file is not up to date with the latest changes in composer.json. You may be getting outdated dependencies. Run update to update them") entonces:
composer update
composer install

En config/app.php en el providers añadir:
Intervention\Image\ImageServiceProvider::class

En config/app.php en el aliases añadir:
'Image' => Intervention\Image\Facades\Image::class

Si sigue dando error volver a ejecutar:
composer update

Si ya simplemente en nuestro Controller podemos usar:
use Intervention\Image\ImageManagerStatic;
Por ejemplo en el método store del controller:
if ($request->has('nom_foto')) {
$nom_foto = $request->file('nom_foto');
// $filename = time().'.'.request()->foto_pelicula->getClientOriginalExtension();
$nombreImg = request()->nom_foto->getClientOriginalName(); // te da tb la extensión
$extImg = request()->nom_foto->getClientOriginalExtension();
$filename = time().'_'.$nombreImg; // .".".$extImg;
$img = ImageManagerStatic::make($nom_foto)->resize(64, 64);
$img->save('images/fotos_productos/'.$filename);
$producto->nom_foto = $filename;
}

Rutas imágenes

Créate en la carpeta public una subcarpeta images y guarda ahí la imagen, para enlazar desde cualquier view:
<img src="{!! asset('images/logoLSG.png') !!}">

Laravel: Tratamiento de imágenes

Instalar el paquete:
composer require intervention/image

En el config/app.php en el provider:
Intervention\Image\ImageServiceProvider::class,
En el config/app.php en el aliases:
'Image' => Intervention\Image\Facades\Image::class,
En el controlador: use Image;
...
public function index() {
        $img = Image::make('images/lsg.png');

        $img->resize(320, 240);
        // $img->insert('public/watermark.png');
        $img->save('images/lsg_resize.png');
}