créer une app

de Transformation de photos

avec cordova

ou comment faire en hybride une app traditionnellement  développée en natif ?

@ClementRicateau

les app leaders du marché

prendre des photos

afficher une galerie d'images

rogner des photos

partager les images

transformer les photos

objectif du projet

prendre des photos

apache/cordova-plugin-camera

rogner les photos

Pas de plugin cordova satisfaisant

Librairie destinée au web

transformer les photos

transformer les photos

jcjohnson/neural-style

kaishengtai/neuralart

Nombre d'itérations ?

Poids du style ?

Autres paramètres...

transformer les photos

=

$$$

galerie d'images

apache/cordova-plugin-camera

partager les images

<button
  onclick="window.plugins.socialsharing.shareViaFacebook(
    'Message via Facebook',
     null /* img */,
     null /* url */,
     function() {
       console.log('share ok')
     },
     function(error) {
      console.error(error)
     })"
>msg via Facebook</button>

EddyVerbruggen/SocialSharing-PhoneGap-Plugin

partager les images

vstirbu/InstagramPlugin

  shareViaInstagram(imagePath, cb) {
    let canvas, context, imageDataUrl;
    const img = new Image();
    img.onload = () => {
      canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      context = canvas.getContext('2d');
      context.drawImage(img, 0, 0);
      try {
        imageDataUrl = canvas.toDataURL('image/jpeg', 1.0);
        Instagram.share(imageDataUrl, cb);
      }
      catch(e) {
        cb(e.message);
      }
    };
    img.src = imagePath;
  }

1. Créer un canvas à partir de l'image

2. Transformer ce canvas en dataURL

sauvegader les images

3. Canvas2ImagePlugin.saveImageDataToLibrary

socialsharing.saveToPhotoAlbum

EddyVerbruggen/SocialSharing-PhoneGap-Plugin

devgeeks/Canvas2ImagePlugin

1. Créer un canvas à partir de l'image

2. Transformer ce canvas en dataURL

transitions fluides

Transitions GPU

-webkit-transform: translate3d(0,0,0);

Nouvelle Webview

transitions fluides

 +     Telerik-Verified-Plugins/NativePageTransitions

camera-roll

camera-roll

récupérer les photos

récupérer les photos de la plus récente à la plus vieille

récupérer la date de prise de vue

avoir des photos carrées et pas étirées

pas d'impact sur la fluidité de l'app

camera-roll

bamlab/cordova-camera-roll

{
  path: "chemin de l'image"
}
  

récupérer les photos de la plus récente à la plus vieille

{
  path: "chemin de l'image",
  date: "timestamp de l'image"
}
  

CameraRoll.getPhotos((photo) => {
  // Callback is called as many times as there are photos
  // photo is an empty object when loading is finished
}

camera-roll

bamlab/cordova-camera-roll

pas d'impact sur la fluidité de l'app

{
  path: "chemin de l'image",
  date: "timestamp de l'image",
  thumbnailPath: 'Chemin de la miniature',
  orientation: 'Orientation de la miniature'
}
  

génération de miniatures sur android

uniquement les photos stockées sur le téléphone

camera-roll

avoir des photos carrées et pas étirées

background-size: cover;

object-fit: cover;

en résumé

C'est possible !

L'UX est dictée par les plugins

REDIMENSIONNEMENT D'IMAGES en suspend

un nouveau plugin camera-roll

un vrai problème: faire une transformation d'images qui plaise à un public

merci de votre attention

@ClementRicateau