Imagen perfecta: conozca Pixo, un editor de fotografías para sus usuarios finales

 

 

 


Índice
  1. Funciones de edición de fotografías #
  2. Soporte de marca blanca #
  3. Plantillas #
  4. Número de API
  5. API REST #
  6. Integración de Pixo en aplicaciones móviles nativas #
  7. Pros y contras #
  8. Pensamientos finales #
  9. Recursos #

Con tantos servicios de edición de imágenes disponibles hoy en día, es bueno tener una buena solución que sea aplicable a todos los sitios web y aplicaciones web que necesitan ofrecer edición de imágenes como función. Hristo Chakarov explica cómo la fácil integración de Pixo Editor (solo unas pocas líneas de JavaScript) y su rica API pueden ahorrarle tiempo y mejorar el flujo de trabajo de sus usuarios finales.

 

Este artículo ha contado con el amable apoyo de nuestros queridos amigos de Pixo , quienes brindan a los usuarios un editor de imágenes hermoso, fácil de usar e intuitivo. ¡Gracias!

Hoy en día existen muchos servicios que funcionan con fotografías. Las imágenes retocadas suelen cumplir mucho mejor sus propósitos que las sin editar. Si desarrolla un servicio que permite a sus usuarios cargar fotografías, incluir una herramienta de edición de fotografías directamente en el servicio antes de cargarlas podría ahorrar mucho tiempo a sus usuarios finales. Aunque existe una gran cantidad de software de edición de fotografías, tanto para computadoras de escritorio como para dispositivos móviles y en línea, editar una foto o un lote de fotografías en dicho software podría ser más lento que editar la foto dentro de la interfaz de usuario de su servicio.

Imaginemos a un usuario eligiendo una foto, aplicándole algunos cambios y simplemente subiéndola. No necesitarían utilizar un complejo software de escritorio o móvil; no necesitarían perder tiempo cargando primero la foto original en una herramienta de edición de imágenes en línea, luego guardando la imagen editada localmente y finalmente cargándola en su servicio.

Un ejemplo perfecto de este caso de uso es un mercado en línea de automóviles usados. Sería muy difícil vender un coche sin facilitar algunas fotos, ¿verdad? Es posible que desees retocar una serie de fotografías antes de cargarlas, por ejemplo, enmascarando la matrícula del coche o ajustando los tonos y colores. Otro ejemplo es una plataforma de gestión de propiedades. Nuevamente, las fotografías son vitales para vender o alquilar una propiedad, y retocarlas puede resultar útil, así como agregar algo de texto sobre las fotografías para explicaciones y aclaraciones. Las plataformas de fotografías de archivo también pueden beneficiarse al permitir a sus usuarios finales personalizar las fotografías de archivo compradas antes de descargarlas.

 

Hay muchas soluciones a este problema. Al elegir el mejor para su sitio web o aplicación, será mejor que tenga en cuenta lo siguiente:

  • Fácil de integrar en su producto
    No querrá leer toneladas de documentación para integrar dicha herramienta.
  • Tantas funciones diversas como quieras
  • Simplicidad
    La mayoría de los usuarios finales necesitan herramientas fáciles de usar para editar sus fotografías.
  • API enriquecida
    Cuanto más control tengas sobre el editor de fotos, mejor.
  • Soporte de marca blanca
    Quiere que parezca parte de su marca.
  • Imágenes de salida optimizadas
    El rendimiento web es vital.
  • Precios asequibles

Uno de los editores de imágenes que quizás le interese considerar y probar es Pixo . Y para una exposición completa, ese es en el que estamos trabajando actualmente, con un plan gratuito y amigable disponible también. Pixo se puede integrar en cualquier sitio web o aplicación debido a su fácil integración (solo unas pocas líneas de JavaScript) y su rica API. También está disponible para WordPress como complemento, reemplazando el editor de imágenes predeterminado en WP Admin. Pixo Editor tiene todas las funciones del editor predeterminado y algunas más.

Uno de ellos es la edición por lotes , que permite al administrador/editor del sitio realizar algunos cambios en una foto y replicarlos en todo el lote. Simplemente seleccione un lote de fotos en la Biblioteca multimedia y elija Editar por lotes. Cuando Pixo abre la primera foto para editarla, el editor del sitio realiza algunos cambios: elige un filtro, ajusta los colores y agrega texto. Al guardar, los cambios se replicarán en el resto de las fotos del lote.

Pero algo aún más interesante es el hecho de que Pixo se puede integrar en la interfaz de un sitio de WordPress, sin importar qué tema se elija o qué complementos existan. Pixo se adjunta a un campo de entrada de archivo y escucha la selección de imágenes; Cuando el usuario final elige una foto, Pixo Editor la abre para editarla. Luego, el usuario puede realizar algunos cambios y guardarlos nuevamente en la entrada del archivo. Al enviar la entrada del archivo, en realidad se enviará la foto editada, no la original. Básicamente, esto hace que el editor sea muy fácil de integrar en cualquier lugar.

Puede hacer que se adjunte a cada campo de entrada de archivo en la página, o a uno específico, mediante el selector de CSS. El controlador de envío de formularios puede ser un complemento de tienda en línea o un complemento de formulario de contacto. Realmente no importa siempre y cuando imprima un campo de entrada de archivo en la página y maneje la carga del archivo al enviar el formulario.

Como Pixo es un SaaS, se puede integrar en cualquier lugar con unas pocas líneas de JavaScript. Puede cargar una imagen desde el DOM o desde una URL, base64cadena o dataurldesde el sistema de archivos local, y más.

 

var image = document.getElementById('myimage'); // DOM imagevar image = 'https://yourdomain.com/path/to/image.jpg'); // image urlvar image = 'abfdSDFEWwq2332Wdsdsdf435esf345SDfdr4S='; // base64 encoded imagevar image = 'data:image/png;base64,abfdSDFEWwq2332Wdsdsdf43..'; // dataurlvar image = '{...}'; // previously exported image as JSONvar constructor_options = { apikey: 'abc123xyz000' }; // must be a valid API key issued by https://pixoeditor.comnew Pixo.Bridge(constructor_options).edit(image);

Cuando se exporta la imagen editada, puedes decidir qué hacer con ella en una función de devolución de llamada.

new Pixo.Bridge({ apikey: 'abc123xyz000', onSave: function(image){ // download the photo image.download(); // or inject it into the DOM document.body.appendChild(image.toImage()); // or serialize it as JSON image.toJSON(); // or upload the photo var data = new FormData(); data.append('image', image.toBlob()); var request = new XMLHttpRequest(); request.open('POST', 'https://yourdomain.com/path/to/upload.php'); request.send(data); } }).edit('https://yourdomain.com/path/to/imagetoedit.jpg');

A continuación se muestra un ejemplo de CodeSandbox que muestra algunas de las opciones de entrada y salida disponibles:

Funciones de edición de fotografías #

Pixo Editor implementa las herramientas de edición de imágenes más comunes: recortar y rotar, corrección de color, agregar texto enriquecido sobre la imagen, filtros y pegatinas. Existe una biblioteca de pegatinas en stock, pero el usuario final puede cargar otra imagen e insertarla como pegatina.

Una de las características más importantes es la herramienta Fondo. Permite a los usuarios finales reemplazar el fondo con un color sólido, otra imagen de Unsplash o una imagen personalizada. Mejores Opiniones y reviews

Existen herramientas de dibujo que permiten a los usuarios finales dibujar libremente sobre la imagen. La herramienta Lápiz es útil para rodear algunas partes de la imagen o dibujar flechas para señalar algo. La herramienta Desenfocar es excelente para enmascarar partes de una fotografía: matrículas de automóviles, rostros u otra información confidencial. La herramienta Borrar hace lo que dice: borra partes de pegatinas insertadas y otras imágenes. Desafortunadamente, la herramienta Borrar no funciona en la foto de origen.

Otra característica interesante es la restauración de la sesión. Cuando el usuario edita una foto en Pixo, la descarga y luego la abre para editarla, todos los objetos como el texto y las pegatinas son editables, y el historial de deshacer/rehacer también está ahí. Esto es realmente genial porque si el usuario comete un error, puede solucionarlo muy fácilmente. La restauración de la sesión también funciona si el usuario cierra el navegador web por accidente. Al abrir el editor con la misma foto, se le pedirá al usuario que restaure la sesión anterior y su trabajo no se perderá.

Por último, pero no menos importante, las fotografías resultantes obtienen una gran compresión sin pérdida de calidad, por lo que no tienes que preocuparte por el tráfico y el almacenamiento. El editor también admite el formato WebP.

 

Soporte de marca blanca #

Pixo Editor tiene soporte completo para marcas blancas. Puede cambiar completamente la apariencia del editor para que coincida con su propia marca: logotipo, colores, fuentes e incluso diseño. La API brinda la posibilidad de definir su paleta de colores con algunas propiedades de JavaScript. Pero incluso puedes cargar un archivo CSS personalizado con anulaciones y cambiar básicamente cualquier cosa. El editor viene con seis temas predeterminados sobre los que puedes crear el tuyo propio.

Plantillas #

Creating templates is yet another cool feature of the service. With Pixo Editor, you can apply changes to an image and export it as a template. Then, when the end user selects this template, your application code can load it in Pixo Editor, replacing the source image with the one selected by the user. This way, all edits, like text blocks, filters, and color corrections, will be applied to the user’s image at once. This is very useful for poster images.

You can create templates with text placeholders. When the end users edit these templates, they can add their custom text to the placeholders and export the final result as an image.

Here are JSFiddle examples:

  1. Template Creator
    An instance of Pixo being used to create a template and save it to localStorage for simplicity.
  2. Template Consumer
    An instance of Pixo being used to pick an image and apply the template to it.

Número de API

Pixo provides an API that allows developers to configure the editor, as well as to execute commands and apply changes to the currently loaded photo. For example, you can extend the stock stickers library with your custom stickers very easily:

pixo_instance.filterStickers(function (stock_stickers) { // merge or completely replace the stickers return my_stickers;});

A similar approach can be used if you want to amend the stock photo frames, fonts (for the text tool), and pre-defined crop sizes. And if you want to apply a change to the current photo programmatically, you can do it with the exec command. You can do almost everything the end user can do within the editor — simply by executing the corresponding command. This includes applying a filter, inserting a sticker, removing the background, color correction, cropping, transforming, and more. Combined with some custom CSS, you can quickly implement your own controls and use only the canvas and the business logic from Pixo:

In the example above, we hide the built-in controls with CSS (display: none), and we leave only the canvas visible. And with some HTML, CSS and JavaScript that calls the exec API, we basically implement our own custom controls. This can be in handy if, for some reason, we cannot fully customize the UI the way we like with just CSS.

But there are many more use cases for the API. For example, we can ensure that the edited images match a specific aspect ratio by cropping the image on load using the API. Or, we can insert a watermark when the editing is done by the end-user, on export:

API REST #

Pixo also provides a REST endpoint. You can call it posting an image binary file or with a URL to an image or its base64 representation, and apply the same changes as the end user can do within the editor:

 

curl -X POST -F 'apikey=yourapikey' -F 'filter=Sepia' -F '[email protected]' https://pixoeditor.com/api/image output.jpeg

Integración de Pixo en aplicaciones móviles nativas #

Pixo is a JavaScript-based service designed for websites or web applications, but it can also be integrated into native mobile applications thanks to the WebView component, supported by both iOS and Android. The flow is very simple:

  1. The User picks up a photo for editing using a native Image Picker component;
  2. La foto está codificada en una cadena base64;
  3. Pixo se carga dentro de un componente WebView;
  4. La cadena base64 se envía a Pixo mediante la API de mensajería WebView;
  5. El Usuario edita la foto con el editor;
  6. El Usuario queda satisfecho con la foto editada y la exporta;
  7. Pixo vuelve a llamar a una función nativa a través de la API WebView y pasa la foto editada como una cadena base64;
  8. La cadena base64 se convierte en una imagen nativa.

Puede ver aquí una aplicación de demostración para iOS que implementa el enfoque anterior y una aplicación para iOS y Android implementada en Flutter .

El mismo enfoque podría implementarse en una aplicación de escritorio de Electron.

Pros y contras #

Utilizar un servicio de edición de imágenes de terceros es fantástico debido a su muy sencilla integración. Agregar un SDK de edición de imágenes o incluso implementar un editor de este tipo por su cuenta requiere mucho más esfuerzo. Además, el servicio se “actualiza automáticamente”, es decir, obtendrá automáticamente las últimas, mejores y más interesantes funciones nuevas, correcciones de errores y mejoras, y compatibilidad con nuevos navegadores, sin tener que cambiar nada por su parte. Sin embargo, esto aumenta el riesgo de que se introduzcan nuevos errores si el proveedor no probó adecuadamente la versión más reciente.

Pero como es un servicio en línea, existe el riesgo de que esté inactivo durante algún tiempo y, durante este período, los usuarios finales no podrán hacer su trabajo. La solución autohospedada siempre estará operativa mientras su aplicación o sitio web principal esté activo. Aún así, el tiempo de actividad promedio de Pixo es del 99,993% (según el informe de estado público), lo cual no es tan malo.

Pensamientos finales #

Pixo parece ser una buena solución de edición de imágenes para todos los sitios web y aplicaciones web que necesitan ofrecer edición de imágenes como función. Su documentación detallada y ejemplos hacen que la integración sea muy sencilla. Pixo tiene una prueba gratuita de 30 días con todas las funciones . Después de eso, puedes continuar usando sus herramientas de edición básicas y API de forma gratuita u obtener un plan de suscripción con funciones completas.

Recursos #

  • Complemento de WordPress
  • Documentación y ejemplos

(vf, il)Explora más en

  • javascript
  • Móvil
  • Aplicaciones
  • API
  • interfaz de usuario





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Imagen perfecta: conozca Pixo, un editor de fotografías para sus usuarios finales

Imagen perfecta: conozca Pixo, un editor de fotografías para sus usuarios finales

Índice Funciones de edición de fotografías #

programar

es

https://pseint.es/static/images/programar-imagen-perfecta-conozca-pixo-1165-0.jpg

2024-04-04

 

Imagen perfecta: conozca Pixo, un editor de fotografías para sus usuarios finales
Imagen perfecta: conozca Pixo, un editor de fotografías para sus usuarios finales

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20