Cannot display image captured from camera via file_uri from external webpage (ios)

[Mark]

Using an iphone 4 with ios 5.1 and phonegap 1.5.0, I'm unable to
display an image taken by the camera on an external web page.
However, I am able to use the file uri to upload the image using the
FileTransfer object. I've tried copying the file to a persistent
directory, I've tried encoding the uri, I've tried converting to a
path, all without success. The same code works on Android, and also
works if I move my external webpage to the www folder.

Has anyone successfully displayed an image from file uri on external
page (ios)? I'm trying to use the external page so enhancements can
be made without need to redeploy app. This is my first native app...I
hope that's a valid assumption.

Thank you for your time!

My script (important parts):

function onSuccess(imageURI) {
var imgE = document.getElementById("smallImage");
imgE.src = imageURI;
}

function getPhoto() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: pictureSource.CAMERA,
allowEdit: false,
encodingType: encodingType.JPEG
});
}

// and the img tag...
<img id="smallImage" src="" />

[Simon MacDonald]

Did you make sure you whitelisted your remote site as per the FAQ?

Q. Links to and imported files from external hosts don't load?

A. The latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well). (Note: If you open the plist file in Xcode, you won't need to fiddle with the XML syntax.)

Also, Apple doesn't mind you loading content from a remote server but they do have a problem with you running code from a remote server.

Simon Mac Donald
http://hi.im/simonmacdonald

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[Mark]

Thank you for your assistance.   I have whitelisted my domain.   I'm able to view mydomain.com, and am able to use filetransfer to mydomain.com.   The problem seems to be in the other direction...how to make mydomain.com/mypage.htm load an image at file://localhost/var/....again on ios only.

I have a workaround...I capture the image from the camera using file-uri, then use filereader.readasdataurl to display that image, and the file-uri to upload the image.   Working on both ios/droid.

Here is the "workaround"...

    function onSuccess(imageURI) {
        lastFileURI = imageURI;
        window.resolveLocalFileSystemURI(imageURI,
            function(fileEntry) {
                fileEntry.file(
                    function(file) {
                        var reader = new FileReader();
                        reader.onloadend = function(evt) {
                            $("#smallImage").css("display", "block").attr("src", evt.target.result);
                        };
                        reader.onerror = function(evt) {
                            alert(defaultErr);
                        };
                        reader.readAsDataURL(file);
                    },
                    function(error) {
                        alert(defaultErr);
                    }
                );
            },
            function(evt) {
                alert(defaultErr);
            }
        );
    }

[Mark]

This also manifests itself in so much as I can't refer to the platform specific phonegap.js file if it's local...so my external pages need to have device detection logic to include the proper js file...as noted in this article: 

http://www.12robots.com/index.cfm/2011/12/12/Dynamically-loading-the-correct-PhoneGapjs-file-for-Android-or-iPhone

[Michael Sheeley]

Issue fixed.

the problem was in cordova 1.9.0 for ios.  upgraded to 2.0.0 and the file transfer issue we were having fixed itself. 

On Tuesday, July 24, 2012 9:40:08 PM UTC-4, Michael Sheeley wrote:

Mark,

I have run into the same issue you have.   Your workaround allows us to display the image using the  filereader.readasdataurl however we are unable to use the file-uri to upload the image.  can you share your code for this part of the solution?  

thanks