/AddWaterMarkToImage

📷 Permite añadir una marca de agua a una o más imágenes, para posteriormente descargarlas

MIT LicenseMIT

📷 Watermark images / Marca de agua en imágenes

Free watermark app that works right in your browser. Watermark 100 of pictures in under 5 minutes. Add watermark to photo & image files.

Add watermarks to images you plan to post on Instagram, Facebook or online in general.

Without limits.


Aplicación gratuita de marcas de agua que funciona directamente en tu navegador. Añade marcas de agua a fotos e imágenes en menos de 5 minutos.

Añade marcas de agua a las imágenes que vayas a publicar en Instagram, Facebook o en Internet en general.

Sin límites.


Screenshots / Imágenes


Step one / Paso uno

Main This is the app. By default it have a watermark.

Así se ve la aplicación al abrirla.


Step two / Paso dos

Watermark In this part you can change and adjust the watermark, on the input text you can paste a web link with your watermark, 'Posición de la marca' means where the watermark is going to be, 'Margen de la posición' is how many pixels the watermark will have respect to the size of the image and the position previusly selected and the 'Opacidad' means the opacity of the watermark 1 is the maximum value.


En esta parte puedes cambiar y ajustar la marca de agua, en el texto de entrada puedes pegar un enlace web con tu marca de agua, 'Posición de la marca' significa donde va a estar la marca de agua, Margen de la posición' es cuántos píxeles tendrá la marca de agua respecto al tamaño de la imagen y la posición previamente seleccionada y la 'Opacidad' significa la opacidad de la marca de agua 1 es el valor máximo.


Step three / Paso tres

LoadImages Now you can click the green button 'Selecciona imágenes a subir', when you click this you can upload your images, I test it whit 64 images but maybe it can be more, once you select all the images it will appears on the screen, wait for the load of all of them.


Ahora puedes pulsar el botón verde 'Selecciona imágenes a subir', cuando pulses este botón podrás subir tus imágenes, Yo lo probé con 64 imágenes pero puede que sean más, una vez seleccionadas todas las imágenes aparecerán en la pantalla, espera a que se carguen todas.


Step four / Paso cuatro

AddWatermark Once the images are loaded, you can click the pink button 'Añádir marca' with this the app will add the watermark to all the images, it will be slow, it depends on the number of images and the size of them, when it finishes the images with the watermark will appear at the bottom of the page, its the way to see a preview. NOTE: If the result dont like you start again, reload the page, for the moment, until I fix it.


Una vez cargadas las imágenes puedes pulsar el botón rosa 'Añádir marca' con esto la app añadirá la marca de agua a todas las imágenes, será lento, depende de la cantidad de imágenes y del tamaño de las mismas, cuando termine las imágenes con la marca de agua aparecerán en la parte inferior de la página, es la forma de ver una vista previa. NOTA: Si el resultado no te gusta empieza de nuevo, recarga la página, de momento, hasta que lo arregle.

Download Once the waiting circle disapears you can click the red button 'Descargar imágenes', this is going to make a .zip file to download all the images at once.

Una vez que desaparezca el círculo de espera puedes hacer clic en el botón rojo 'Descargar imágenes', esto va a hacer un archivo .zip para descargar todas las imágenes a la vez.

zipfile Select the folder where you want to have the .zip file.

Seleccione la carpeta donde desea tener el archivo .zip.

zipfile To finish, right click on the zip file, extract here and we are done, you have your images with watermark.

Para terminar, pulsa con el botón derecho sobre el archivo zip, extrae aquí y ya está, ya tienes tus imágenes con marca de agua.



Demo / Prueba

You can use the githubpages version

Usa la siguiente web para probarla

🔗 https://oscarfdiaz.github.io/AddWaterMarkToImage/


Run Locally / Ejecutarlo localmente

Clone the project

git clone https://github.com/OscarFDiaz/AddWaterMarkToImage.git

Go to the project directory

cd my-project

Then... open the project with VScode

code .

Start the server with live server extension by Ritwick Dey

ritwickdey.LiveServer

It will open a web page with the project if you have problems with the images change the 127.0.0...PORT IP to localhost:PORT


Dependencies / Dependencias

Dependencies are not necessary, but the project uses other projects to be able to work, it is done locally so as not to depend on the use of the internet and to make it easier and faster to use, without so many failures.

Watermark by lelinhtinh

JQuery plugin Watermark help you seal batch of images, like a stamp tool.

Because this plugin is written in HTML5 and Javascript, so it will operate without a server for image processing, bandwidth limit is no longer the thing you need to worry.

Suitable uses for low-bandwidth web server, or web creation services, free forums without management server as Blogspot, Forumotion, ...

Link to github pages of the project and demo

🔗 https://lelinhtinh.github.io/watermark/

Link to Github repository

🔗 https://github.com/lelinhtinh/watermar

jQuery

Link

🔗 https://jquery.com/

jsZip by Stuk

A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.

Link to github pages of the project

🔗 https://stuk.github.io/jszip/

Link to Github repository

🔗 https://github.com/Stuk/jszip


License

MIT


Authors

@OscarFDiaz