Images (jqm1000)

{{#images:versionlatest-32x32.png|stock}}

Ce support permet de saisir et d'afficher des images.

Saisir une image

La saisie d'une image ce fait dans le cadre d'un formulaire de saisie encapsulé dans une page.

Dans cette page vous gérez des champs de saisie, dans le code html de la page ajoutez un champ input type file pour ajouter une zone de saisie d'image :

  <div data-role="content">
    ....
     <div data-role="fieldcontain">
          <input class="imgInput" id="prof-imgInput" data-canvas="prof-photo" type="file" accept="image/*;capture=camera">
          <div><canvas id="prof-photo"/></div>
    </div>
  </div>

Dans le code javascript du document ajouter un handler d'évènement sur le changement de l'image :

<source lang="javascript">

$(document).ready( function() {

    ....
    $('.imgInput').change(function(e) {
         $.mobApp.setImageInputToCanvas(this);
    });

} </source>

Le but de ce code est de visualiser l'image sélectionnée par l'utilisateur dans l'élément canvas.

Envoyer les données de l'image

L'échange des données entre le serveur et le mobile ce fait par le format DataURL; ce format combine le type de contenu (mime) et le contenu encodé en base 64.

Javascript supporte directement DataURL par la méthode toDataURL()

Dans la méthode d'envoi des données de votre formulaire ajoutez les données de l'image comme suit:

<source lang="javascript">

$(document).ready( function() {

    ....
    $('#btnProfSend').click(function(e) {
         e.preventDefault();
         //
         var profile = {};
         profile.lastname = $("#prof-lastname").val();
         ....
         profile.photo = document.getElementById("prof-photo").toDataURL();
         //
         $.l1000.postNoCache($.l1000._api_+"/setProfile", profile, function( data ) {
         },"json");

    });

} </source>

Afficher une image

Lorsque vous souhaitez afficher une image renvoyée par le serveur il est préférable de séparer la requête retournant les informations du contexte de l'image et la requête retournant l'image elle-même.

Dans le code serveur retournant les informations détails (dont l'image fait partie) :

<source lang="delphi">

Procedure getProfile(req:Tjson; var resp:TObject); var json:TJson; inst:salarieView; indx:Integer; begin

 json := TJson.Create();
 resp := json;
  ...
    if inst.oidphoto<> then
     begin
       json.result[indx].l := 'di'; // link to a document image
       json.result[indx].h := '/getProfilePhoto'; // get document method
       json.result[indx].id:= inst.oidphoto;
       json.result[indx].v := _TP('Photo associée au profil');
       json.result[indx].idf:= 'photo';
       indx := indx+1;
     end
     else
     begin
       json.result[indx].l := 'i';
       json.result[indx].v := _TP('Le profil na pas de photo');
       json.result[indx].ico := 'alert';
       indx := indx+1;
     end;

end; </source>

Puis implémentez une méthode qui retourne l'image elle même, les données sont renvoyées au format DataURL :

<source lang="delphi"> //Procedure getProfilePhoto(req:Tjson; var resp:TObject); var json:TJson; inst:TPhotos; begin

 json := TJson.Create();
 resp := json;

 inst := TPhotos.FindObject(req.id);
 if Assigned(inst) then
  begin
    json.title := inst.Caption;
    json.id := inst.OID;
    json.imageData := inst.photo.AsDataURL;
  end;

 if json.isEmpty then
  begin
    json.title := _TP('Aucune photo retrouvée.');
    json.id := ;
  end;

end; </source>

Références

Fonction	Usage
$.mobApp.setImageInputToCanvas(eltInput)	Copie un fichier image retourné par un élément input dans un élément Canvas du document.
$.mobApp.setImageDataToCanvas(data,eltCanvas)	Copie des données image dans un élément Canvas du document.