Home > Uncategorized > Upload a photo from iPhone camera with PhoneGap

Upload a photo from iPhone camera with PhoneGap

Getting a photo from an iPhone camera to the internet is the first step in any photo-sharing app. Here is a snippet of code using PhoneGap that uploads a photo from an iPhone to a webserver.

function onBodyLoad()

{

document.addEventListener(“deviceready”,onDeviceReady,false);

}

function onDeviceReady()

{

try{

navigator.camera.getPicture(onCaptureSuccess, onCaptureFail);

}

catch(ex)

{

alert(ex);

}

}

function onCaptureSuccess(imageURI)

{

try

{

$.ajax({

type: “POST”,

url: “http://distance.freetextuk.com/upload.aspx”,

data: { image: imageURI}

}).done(function( msg ) {

$(“#imgLoad”).attr(“src”,”http://yourserver.com/uploads/” + msg);

}).fail(function(a,b){

alert( “Failed to save:” + b);

});

}

catch(ex)

{

alert(ex);

}

}

function onCaptureFail()

{

alert(“Failed to capture!”);

}

 As you can see, it takes a picture using the navigator.camera.getPicture function, which returns (asynchronously) a base 64 encoded string of the image in Jpeg format. This base64 data is posted via Ajax to a .NET script running at yourserver.com – Which stores the image in a folder, and returns a string containing the filename, which is auto-generated.
The image is downloaded by simply setting the src attribute of an img tag on the page.
The .NET server side code is as follows:

protected void Page_Load(object sender, EventArgs e)
{
string strImage = Request.Form[“Image”];
if (string.IsNullOrEmpty(strImage))
{
Response.Write(“Image field not provided”);
return;
}
byte[] b = System.Convert.FromBase64String(strImage);
var strRealPath = Server.MapPath(“~/uploads/”);
var strRandomFile = System.IO.Path.GetRandomFileName() + “.jpg”;
FileStream fs = new FileStream(strRealPath + strRandomFile, FileMode.CreateNew);
fs.Write(b, 0, b.Length);
fs.Close();
Response.Write(strRandomFile);
}

Note, that you will need to create an “uploads” folder, and give this folder write permissions.

Advertisements
Categories: Uncategorized
  1. rita
    March 20, 2013 at 5:27 pm

    I want to capture an image in a Phonegap app, then I send it to a remote server with web service. net.
    I use the webService :
    [WebMethod]
    public bool SavePhoto(Guid IdPrestation, Guid IdPhoto, byte[] ImgIn)
    {
    System.IO.MemoryStream ms = new System.IO.MemoryStream(ImgIn);
    System.Drawing.Bitmap b =(System.Drawing.Bitmap)System.Drawing.Image.FromStream(ms);
    //Si le repertoire n’existe pas alors on le crée
    // if (! RepertoirePhotoExist(IdPrestation))
    //{
    System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(“Photos/” + IdPrestation.ToString()));
    //}
    string strFichier = HttpContext.Current.Server.MapPath(“Photos/” + IdPrestation.ToString() + “/” + IdPhoto.ToString() + “.jpg”);
    // Si le fichier existe alors
    if (System.IO.File.Exists(strFichier))
    {
    System.IO.File.Delete(strFichier);
    }
    else
    {
    b.Save(strFichier, System.Drawing.Imaging.ImageFormat.Jpeg);
    }
    return true;
    }
    please help.

  1. February 20, 2013 at 9:02 am
  2. May 1, 2013 at 11:10 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: