Fermer

février 10, 2023

Découvrez Pixo, un éditeur de photos pour vos utilisateurs finaux

Découvrez Pixo, un éditeur de photos pour vos utilisateurs finaux


De nos jours, de nombreux services fonctionnent avec des photos. Les images retouchées remplissent généralement mieux leurs objectifs que les images brutes. Si vous développez un service qui permet à ses utilisateurs de télécharger des photos, intégrer un outil de retouche photo directement dans le service avant le téléchargement pourrait faire gagner beaucoup de temps à vos utilisateurs finaux. Même s’il existe une grande quantité de logiciels de retouche photo, à la fois pour les ordinateurs de bureau, les appareils mobiles et en ligne, l’édition d’une photo ou d’un lot de photos dans de tels logiciels peut être plus lente que l’édition de la photo dans l’interface utilisateur de votre service.

Imaginons un utilisateur choisissant une photo, lui appliquant quelques modifications et la téléchargeant simplement. Ils n’auraient pas besoin d’utiliser un logiciel de bureau ou mobile complexe ; ils n’auraient pas besoin de perdre du temps en téléchargeant d’abord la photo originale sur un outil de retouche d’image en ligne, puis en devant enregistrer l’image modifiée localement, et enfin en la téléchargeant sur votre service.

Un exemple parfait d’un tel cas d’utilisation est un marché en ligne pour les voitures d’occasion. Il serait vraiment difficile de vendre une voiture sans en fournir quelques photos, n’est-ce pas ? Vous voudrez peut-être retoucher un certain nombre de photos avant de les télécharger, par exemple en masquant la plaque de la voiture ou en ajustant les tons et les couleurs. Un autre exemple est une plateforme de gestion immobilière. Encore une fois, les photos sont essentielles pour vendre ou louer une propriété, et les retouches peuvent être utiles, ainsi que l’ajout de texte sur les photos pour des explications et des clarifications. Les plates-formes de photos de stock peuvent également bénéficier de la possibilité pour leurs utilisateurs finaux de personnaliser leurs photos de stock achetées avant de les télécharger.

Il existe de nombreuses solutions à ce problème. Lorsque vous choisissez le meilleur pour votre site Web ou votre application, vous feriez mieux de prendre en considération les éléments suivants :

  • Facile à intégrer dans votre produit
    Vous n’avez pas envie de lire des tonnes de documentation pour intégrer un tel outil.
  • Autant de fonctionnalités diverses que vous le souhaitez
  • Simplicité
    La majorité des utilisateurs finaux ont besoin d’outils faciles à utiliser pour éditer leurs photos.
  • API riche
    Plus vous avez de contrôle sur l’éditeur de photos, mieux c’est.
  • Assistance en marque blanche
    Vous voulez le faire ressembler à une partie de votre marque.
  • Images de sortie optimisées
    Les performances Web sont essentielles.
  • Prix ​​​​abordable

L’un des éditeurs d’images que vous aimeriez peut-être envisager et essayer est pixel. Et pour une exposition complète, c’est celui sur lequel nous travaillons actuellement, avec un plan gratuit convivial également disponible. Pixo peut être intégré à n’importe quel site Web ou application en raison de son intégration facile (seulement quelques lignes JavaScript) et de sa riche API. Il est également disponible pour WordPress en tant que plugin, remplaçant l’éditeur d’image par défaut dans WP Admin. Pixo Editor possède toutes les fonctionnalités de l’éditeur par défaut et quelques autres.

L’un d’eux est édition par lots qui permet à l’administrateur/éditeur du site d’apporter des modifications à une photo et de les répliquer sur l’ensemble du lot. Sélectionnez simplement un lot de photos dans la médiathèque et choisissez Modification par lot. Lorsque Pixo ouvre la première photo pour la retoucher, l’éditeur du site apporte quelques modifications : choisit un filtre, ajuste les couleurs et ajoute du texte. Lors de l’enregistrement, les modifications seront répliquées sur le reste des photos du lot !

Éditeur d’images Pixo pour WordPress

Mais quelque chose d’encore plus cool est le fait que Pixo peut être intégré à l’interface d’un site WordPress, quel que soit le thème choisi ou les plugins disponibles. Pixo s’attache à un champ de saisie de fichier et écoute la sélection d’image ; lorsque l’utilisateur final sélectionne une photo, Pixo Editor l’ouvre pour l’éditer. L’utilisateur peut alors apporter des modifications et les enregistrer dans le fichier d’entrée. La soumission de l’entrée de fichier soumettra en fait la photo modifiée, pas celle d’origine. Cela rend l’éditeur très facile à intégrer n’importe où.

Vous pouvez le faire attacher à chaque champ de saisie de fichier sur la page, ou à un champ spécifique, via le sélecteur CSS. Le gestionnaire de soumission de formulaire peut être un plugin de boutique en ligne ou un plugin de formulaire de contact. Peu importe tant qu’il imprime un champ de saisie de fichier sur la page et gère le téléchargement du fichier lors de la soumission du formulaire.

Comme Pixo est un SaaS, il peut être intégré n’importe où avec quelques lignes de JavaScript. Il peut charger une image depuis le DOM ou depuis une URL, base64 chaîne ou dataurlà partir du système de fichiers local, etc.

var image = document.getElementById('myimage'); // DOM image
var image="https://yourdomain.com/path/to/image.jpg"); // image url
var image="abfdSDFEWwq2332Wdsdsdf435esf345SDfdr4S="; // base64 encoded image
var image="data:image/png;base64,abfdSDFEWwq2332Wdsdsdf43.."; // dataurl
var image="{...}"; // previously exported image as JSON

var constructor_options = { apikey: 'abc123xyz000' }; // must be a valid API key issued by https://pixoeditor.com
new Pixo.Bridge(constructor_options).edit(image);

Lorsque l’image modifiée est exportée, vous pouvez décider quoi en faire dans une fonction de rappel.

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', 'http://yourdomain.com/path/to/upload.php');
       request.send(data);
    }
 }).edit('http://yourdomain.com/path/to/imagetoedit.jpg');

Voici un exemple CodeSandbox montrant certaines des options d’entrée et de sortie disponibles :

Fonctions d’édition de photos

Pixo Editor implémente les outils d’édition d’image les plus courants – recadrage et rotation, correction des couleurs, ajout de texte enrichi sur l’image, filtres et autocollants. Il existe une bibliothèque d’autocollants, mais l’utilisateur final peut télécharger une autre image et l’insérer en tant qu’autocollant.

L’outil Arrière-plan est l’une des plus grandes fonctionnalités. Il permet aux utilisateurs finaux de remplacer l’arrière-plan par une couleur unie, une autre image d’Unsplash ou une image personnalisée.

Éditeur Pixo : outil d’arrière-plan

Il existe des outils de dessin qui permettent aux utilisateurs finaux de dessiner librement sur l’image. L’outil Crayon est utile pour entourer certaines parties de l’image ou dessiner des flèches pour pointer vers quelque chose. L’outil Flou est excellent pour masquer des parties d’une photo – plaques de voiture, visages ou autres informations sensibles. L’outil Effacer fait ce qu’il dit – efface des parties d’autocollants insérés et d’autres images. Malheureusement, l’outil Effacer ne fonctionne pas sur la photo source.

Une autre fonctionnalité intéressante est la restauration de session. Lorsque l’utilisateur modifie une photo dans Pixo, la télécharge, puis l’ouvre pour la modifier, tous les objets tels que le texte et les autocollants sont modifiables, et l’historique d’annulation/rétablissement est également présent. C’est vraiment cool car si l’utilisateur fait une erreur, il peut la réparer très facilement. La restauration de session fonctionne également si l’utilisateur ferme le navigateur Web par accident. L’ouverture de l’éditeur avec la même photo invitera l’utilisateur à restaurer la session précédente, et son travail ne sera pas perdu.

Restauration de session expliquée.

Enfin et surtout, les photos de sortie bénéficient d’une excellente compression sans aucune perte de qualité, vous n’avez donc pas à vous soucier du trafic et du stockage. L’éditeur prend également en charge le format WebP.

Assistance en marque blanche

Pixo Editor prend entièrement en charge la marque blanche. Vous pouvez modifier complètement l’apparence de l’éditeur afin de l’adapter à votre propre marque – logo, couleurs, polices et même mise en page. L’API donne la possibilité de définir votre palette de couleurs avec quelques propriétés JavaScript. Mais vous pouvez même télécharger un fichier CSS personnalisé avec des remplacements et modifier pratiquement n’importe quoi. L’éditeur est livré avec six thèmes par défaut sur lesquels vous pouvez créer le vôtre.

Modèles

La création de modèles est une autre fonctionnalité intéressante du service. Avec Pixo Editor, vous pouvez appliquer des modifications à une image et l’exporter en tant que modèle. Ensuite, lorsque l’utilisateur final sélectionne ce modèle, votre code d’application peut le charger dans Pixo Editor, en remplaçant l’image source par celle sélectionnée par l’utilisateur. De cette façon, toutes les modifications, telles que les blocs de texte, les filtres et les corrections de couleur, seront appliquées à l’image de l’utilisateur en une seule fois. Ceci est très utile pour les images d’affiches.

Vous pouvez créer des modèles avec des espaces réservés de texte. Lorsque les utilisateurs finaux modifient ces modèles, ils peuvent ajouter leur texte personnalisé aux espaces réservés et exporter le résultat final sous forme d’image.

Voici des exemples JSFiddle :

  1. Créateur de modèles
    Une instance de Pixo utilisée pour créer un modèle et l’enregistrer dans localStorage pour plus de simplicité.
  2. Modèle Consommateur
    Une instance de Pixo utilisée pour sélectionner une image et lui appliquer le modèle.

API

Pixo fournit une API qui permet aux développeurs de configurer l’éditeur, ainsi que d’exécuter des commandes et d’appliquer des modifications à la photo actuellement chargée. Par exemple, vous pouvez très facilement étendre la bibliothèque d’autocollants en stock avec vos autocollants personnalisés :

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

Une approche similaire peut être utilisée si vous souhaitez modifier les cadres photo, les polices (pour l’outil de texte) et les tailles de recadrage prédéfinies. Et si vous souhaitez appliquer une modification à la photo actuelle par programme, vous pouvez le faire avec le exec commande. Vous pouvez faire presque tout ce que l’utilisateur final peut faire dans l’éditeur, simplement en exécutant la commande correspondante. Cela inclut l’application d’un filtre, l’insertion d’un autocollant, la suppression de l’arrière-plan, la correction des couleurs, le recadrage, la transformation, etc. Combiné avec du CSS personnalisé, vous pouvez rapidement implémenter vos propres contrôles et n’utiliser que le canevas et la logique métier de Pixo :

Dans l’exemple ci-dessus, nous masquons les contrôles intégrés avec CSS (display: none), et nous ne laissons que la toile visible. Et avec du HTML, du CSS et du JavaScript qui appellent le exec API, nous implémentons essentiellement nos propres contrôles personnalisés. Cela peut être pratique si, pour une raison quelconque, nous ne pouvons pas entièrement personnaliser l’interface utilisateur comme nous l’aimons avec juste CSS.

Mais il existe de nombreux autres cas d’utilisation de l’API. Par exemple, nous pouvons nous assurer que les images modifiées correspondent à un rapport d’aspect spécifique en recadrant l’image au chargement à l’aide de l’API. Ou, nous pouvons insérer un filigrane lorsque l’édition est effectuée par l’utilisateur final, à l’exportation :

API REST

Pixo fournit également un point de terminaison REST. Vous pouvez l’appeler publier un fichier binaire d’image ou avec une URL vers une image ou sa représentation base64, et appliquer les mêmes modifications que l’utilisateur final peut faire dans l’éditeur :

curl -X POST -F 'apikey=yourapikey' -F 'filter=Sepia' -F 'image=@input.jpeg' https://pixoeditor.com/api/image > output.jpeg

Intégration de Pixo dans les applications mobiles natives

Pixo est un service basé sur JavaScript conçu pour les sites Web ou les applications Web, mais il peut également être intégré dans des applications mobiles natives grâce au composant WebView, pris en charge à la fois par iOS et Android. Le flux est très simple :

  1. L’utilisateur sélectionne une photo pour l’éditer à l’aide d’un composant natif Image Picker ;
  2. La photo est encodée en chaîne base64 ;
  3. Pixo est chargé dans un composant WebView ;
  4. La chaîne base64 est envoyée à Pixo à l’aide de l’API de messagerie WebView ;
  5. L’utilisateur édite la photo avec l’éditeur ;
  6. L’utilisateur est satisfait de la photo éditée et l’exporte ;
  7. Pixo rappelle une fonction native via l’API WebView et transmet la photo modifiée sous forme de chaîne base64 ;
  8. La chaîne base64 est convertie en image native.

Vous pouvez voir ici une application de démonstration pour iOS qui met en œuvre l’approche ci-dessus et une application pour iOS et Android implémentée dans Flutter.

La même approche pourrait être mise en œuvre dans une application de bureau Electron.

Avantages et inconvénients

L’utilisation d’un service d’édition d’images tiers est excellente en raison de son intégration très facile. L’ajout d’un SDK d’édition d’images ou même la mise en œuvre d’un tel éditeur par vous-même nécessite beaucoup plus d’efforts. En outre, le service « se met automatiquement à jour », c’est-à-dire que vous obtiendrez les dernières fonctionnalités les plus importantes et les plus intéressantes, les corrections de bogues et les améliorations, et la prise en charge automatique des nouveaux navigateurs – sans avoir à changer quoi que ce soit de votre côté. Cependant, cela augmente le risque d’introduction de nouveaux bogues si la nouvelle version n’a pas été correctement testée par le fournisseur.

Mais comme il s’agit d’un service en ligne, il y a un risque qu’il soit indisponible pendant un certain temps, et pendant cette période, vos utilisateurs finaux ne pourront pas faire leur travail. La solution auto-hébergée sera toujours opérationnelle tant que votre application ou votre site Web principal sera en ligne. Pourtant, la disponibilité moyenne de Pixo est de 99,993% (selon le rapport de statut public), ce qui n’est pas si mal.

Dernières pensées

Pixo semble être une bonne solution d’édition d’images pour tous les sites Web et applications Web qui doivent fournir l’édition d’images en tant que fonctionnalité. Sa documentation détaillée et ses exemples rendent l’intégration très facile. Pixo a un essai gratuit complet de 30 jours. Après cela, vous pouvez continuer à utiliser gratuitement ses outils d’édition de base et ses API ou obtenir un plan d’abonnement avec toutes les fonctionnalités.

Ressources

Éditorial fracassant
(vf, il)




Source link