Sonntag, 10. Juni 2012

Image Komprimierung mit dem Titanium Framework


Mit dem Titanium Framework von Appcelerator ist es (schnell) möglich eine native App für Android und iOS mit Javascript zu entwickeln.

Durch die im Titanium Framework vorhandene JS-Api hat man Zugriff auf die Elemente/Sensoren von dem Mobil-Device. Die Verwendung ist in der Dokumentation vom Titanium Framework ausreichend beschrieben.

Auf der Website von Appcelerator gibt es die kostenlose Community-Version, die Dokumentation und viele Videos.  Die Beispiel App Kitchensink zeigt die grundlegenden Möglichkeiten des Titanium Frameworks,  was die Einarbeitung einfach macht.

Es gibt die Möglichkeit beim Titanium Framework Module zu verwenden. Dazu wird der Modul-Code vollständig  gekapselt und kann dann im eigenen Code verwendet werden. Man findet Module auf der Website von Appcelerator und bei Git.

Wenn man Bilder mit der Kamera vom Mobile-Device aufnimmt und diese versenden möchte, bietet es sich an die Bilder vorher zu skalieren bzw. zu komprimieren. Da das Titanium Framework aber keine Image Komprimierung unterstützt bleibt nur die Möglichkeit dies selber zu programmieren oder man nutzt vorhandene Module.

Es gibt für Android und iOS unterschiedliche Module, die dies bereits können.

Das folgende Beispiel zeigt wie ein aufgenommenes Bild von der Kamera des Mobile-Device mit Unterstützung der Module komprimiert wird.

Titanium.Media.showCamera({
   success : function(event) {
     var image = event.media;

     if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {

       if (Ti.Platform.osname == "android") {
         var JpegEncoder = require("com.novelys.jpegencoder");
         var first = JpegEncoder.createEncoder({
           imageBlob : image,
           compressionQuality : 85,
         });
         first.scaleAndEncode();
         image = first.imageBlob;
       }else if (Ti.Platform.osname == "iphone") {
         var jpgcompressor = require("com.sideshowcoder.jpgcompressor");
         jpgcompressor.setCompressSize(102400);
         jpgcompressor.setWorstCompressQuality(0.85);
         image = jpgcompressor.compress(image)
       }
      var imageView = Titanium.UI.createImageView({
         top : 2,
         width : "100%",
         image : image,
       });
      win.add(imageView);
     }
  },
   cancel : function() {
   },
   error : function(error) {
  },
   saveToPhotoGallery : true,
   allowEditing : true,
   mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
 });




Das Versenden des Bildes kann direkt im Anschluss realisiert werden. Dazu gibt es eigene Funktionen vom Titanium Framework.


var xhr = Titanium.Network.createHTTPClient();
xhr.onerror = function(e) {
  Ti.API.info('error ' + e.error);
};
xhr.onload = function() {
  Ti.API.info('upload ok');
};
xhr.open('POST', "URL");

var params = {
  'image' : image
};
xhr.send(params);


Keine Kommentare:

Kommentar veröffentlichen