使用Flex Mobile 4.6在iOS上上传库或捕获的图像

Question

有没有人对使用iOS的Flex 4.6中的Camera API有任何经验？我遇到了很多设置问题,缺乏文档.我正在尝试设置图片上传组件,用户可以在其中捕获新照片或从库中选择现有照片.

对于捕获,当图像保存为JPEG时,似乎有一个巨大的挂起(例如10秒,应用程序只是无响应),而我正在使用Alchemy swc.

        private var cam:CameraUI;
        protected function takePhotoHandler(event:MouseEvent):void
        {
            if(CameraUI.isSupported) {
                cam = new CameraUI();
                cam.addEventListener(MediaEvent.COMPLETE, mediaEventComplete);
                cam.launch(MediaType.IMAGE);
            }
        }
        protected function mediaEventComplete(e:MediaEvent):void
        {
            cam.removeEventListener(MediaEvent.COMPLETE, mediaEventComplete);
            status.text =   "Media captured..." ;

            var imagePromise:MediaPromise = e.data;
            var loader:Loader = new Loader();
            if(imagePromise.isAsync) {
                status.text =   "Asynchronous media promise." ;
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, asyncImageLoadHandler);
                loader.addEventListener(IOErrorEvent.IO_ERROR, asyncImageErrorHandler);

                loader.loadFilePromise(imagePromise);

            } else {
                status.text =   "Synchronous media promise.";
                loader.loadFilePromise(imagePromise);
                img.source = loader.content;
                saveImage(loader.contentLoaderInfo);
            }

        }
        protected function asyncImageLoadHandler(e:Event):void
        {
            status.text =  "Media loaded in memory.";
            img.source = e.currentTarget.loader.content;
            saveImage(e.currentTarget.loader.contentLoaderInfo);
        }
        protected function saveImage(loaderInfo:LoaderInfo):void
        {
            if(CameraRoll.supportsAddBitmapData){
                var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height);
                bitmapData.draw(loaderInfo.loader);  
                d_trace("bitmapDraw");
                //var c:CameraRoll = new CameraRoll();
                //c.addBitmapData(bitmapData);
                d_trace("writing to disk");
                var f:File = File.applicationStorageDirectory.resolvePath("temp");     
                var stream:FileStream = new FileStream()
                stream.open(f, FileMode.WRITE);      
                d_trace("encoding start");
                var baSource: ByteArray = bitmapData.clone().getPixels( new Rectangle( 0, 0, loaderInfo.width, loaderInfo.height) );
                var bytes: ByteArray = as3_jpeg_wrapper.write_jpeg_file(baSource, loaderInfo.width, loaderInfo.height, 3, 2, 80);     
                d_trace("encoding end");
                stream.writeBytes(bytes,0,bytes.bytesAvailable);
                stream.close(); 
                d_trace(f.url);
                img.source = f.url;
                d_trace("UPLOADING START");

                 f.addEventListener(Event.COMPLETE,uploadCompleteHandler);
                f.addEventListener(Event.OPEN,openUploadHandler);
                f.upload(urlRequest);


            }
        }

要从库中进行选择,我无法获得实际开始上传的文件引用.进行选择时,mediaPromise.file值为null.mediaPromise.isAsync为true,我可以附加一个加载器监听器,但只返回contentLoaderInfo,它没有引用实际的File或FileRefernce,所以我不能在没有创建临时图像的情况下调用上传方法,这看起来很昂贵疯.

protected function chooseImage(): void {
    if(CameraRoll.supportsBrowseForImage) {
        var roll: CameraRoll = newCameraRoll();
        roll.addEventListener( MediaEvent.SELECT, roll_selectHandler );
        var options:CameraRollBrowseOptions = new CameraRollBrowseOptions();
         roll.browseForImage(options);
 }}
        private function roll_selectHandler( event: MediaEvent ): void
        {

            var imagePromise:MediaPromise = event.data;

            if(imagePromise.isAsync) {
                // Here's where I get. Not sure how to get the reference to the file I just selected.
            }}

任何帮助,将不胜感激.

谢谢!

Answer 1

我想我找到了适用于我的案例的解决方案,所以我想分享它,以防它可以帮助别人.shaunhusain的帖子肯定让我朝着正确的方向前进.我能够避免使用Alchemy swc,这可以在应用程序中节省大量的时间.关键是我发现这个AS3库以一种模仿标准文件上传POST操作的方式格式化URLRequest.这是基本的大纲:

我有一个名为"status"的小组件,其中包含一个带有用户图标和状态文本的叠加层.当用户想要添加照片时,他们会获得一个ViewMenu,其中包含从库中获取照片或拍摄新照片的选项.代码的内容如下.

 //IMAGE HANDLING

//Helpful Links:
//http://www.quietless.com/kitchen/dynamically-create-an-image-in-flash-and-save-it-to-the-desktop-or-server/
//http://stackoverflow.com/questions/597947/how-can-i-send-a-bytearray-from-flash-and-some-form-data-to-php
// GET WRAPPER CLASS Here: http://code.google.com/p/asfeedback/source/browse/trunk/com/marston/utils/URLRequestWrapper.as


//This part is basically all based on http://www.adobe.com/devnet/air/articles/uploading-images-media-promise.html


  protected var cameraRoll:CameraRoll = new CameraRoll();

  //User choose to pick a photo from their library
  protected function chooseImage():void {
   if( CameraRoll.supportsBrowseForImage )
    {
      cameraRoll.addEventListener( MediaEvent.SELECT, imageSelected );
      cameraRoll.addEventListener( Event.CANCEL, browseCanceled );
      cameraRoll.addEventListener( ErrorEvent.ERROR, mediaError );
      cameraRoll.browseForImage();
    }  else {
              trace( "Image browsing is not supported on this device.");
    }
   }

    //User choose to take a new photo!
protected var cameraUI:CameraUI = new CameraUI();
protected function captureImage():void
{
     if( CameraUI.isSupported )
    {
      trace( "Initializing..." );
          cameraUI.addEventListener( MediaEvent.COMPLETE, imageSelected );
      cameraUI.addEventListener( Event.CANCEL, browseCanceled );
      cameraUI.addEventListener( ErrorEvent.ERROR, mediaError );
      cameraUI.launch( MediaType.IMAGE );
    } else {
      trace( "CameraUI is not supported.");
    }
}


private function browseCanceled (e:Event):void
{
    trace ("Camera Operation Cancelled");
}

private function mediaError (e:ErrorEvent):void
{
    trace ("mediaError");
}


private var dataSource:IDataInput;
private function imageSelected( event:MediaEvent ):void
    {
       trace( "Media selected..." );   

               var imagePromise:MediaPromise = event.data;
       dataSource = imagePromise.open();    
       if( imagePromise.isAsync )
       {
           trace( "Asynchronous media promise." );
           var eventSource:IEventDispatcher = dataSource as IEventDispatcher;            
           eventSource.addEventListener( Event.COMPLETE, onMediaLoaded );         
       } else {
           trace( "Synchronous media promise." );
        readMediaData();
       }
}

        private function onMediaLoaded( event:Event ):void
        {
            trace("Media load complete");
            readMediaData();
        }


        private function readMediaData():void
        {
            var imageBytes:ByteArray = new ByteArray();
            dataSource.readBytes( imageBytes );
            upload(imageBytes);
        }

        //OK Here's where it gets sent. Once the IDataInput has read the bytes of the image, we can send it via our custom URLRequestWrapper
                    //which will format the request so the server interprets it was a normal file upload. Your params will get encoded as well 
                    //I used Uploadify this time but I've used this Wrapper class in other projects with success 
        protected function upload( ba:ByteArray, fileName:String = null ):void
        {
            if( fileName == null ) //Make a name with correct file type
            {                
                var now:Date = new Date();
                fileName = "IMG" + now.fullYear + now.month +now.day +
                    now.hours + now.minutes + now.seconds + ".jpg";
            }

            var loader:URLLoader = new URLLoader();
            loader.dataFormat= URLLoaderDataFormat.BINARY;

            var params:Object = {};
            params.name = fileName;
            params.user_id = model.user.user_id;

            var wrapper:URLRequestWrapper = new URLRequestWrapper(ba, fileName, null, params);
            wrapper.url = "http://www.your-domain.com/uploadify.php";

            loader.addEventListener( Event.COMPLETE, onUploadComplete );
            loader.addEventListener(IOErrorEvent.IO_ERROR, onUploadError );
            loader.load(wrapper.request);           
        }

        private function onUploadComplete(e:Event):void
        {
            trace("UPLOAD COMPLETE");
            var bytes:ByteArray = e.currentTarget.data as ByteArray;
                            //Most likely you'd want a server response. It will be returned as a ByteArray, so you can get back to the string:
            trace("RESPONSE", bytes.toString());
        }

        private function onUploadError(e:IOErrorEvent):void
        {
            trace("IOERROR", e.text);
        }