Created
January 23, 2012 22:59
-
-
Save joshbirk/1666152 to your computer and use it in GitHub Desktop.
Using PhoneGap to get and upload Images in Visualforce
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public with sharing class KennelTest { | |
| public Dog__c exampleDog {get; set;} | |
| public Attachment dogImage {get; set;} | |
| public String getImageBase64() { | |
| if(dogImage.Body != null) { | |
| return EncodingUtil.base64Encode(dogImage.Body); | |
| } else { | |
| return ''; | |
| } | |
| } | |
| public KennelTest() { | |
| exampleDog = [SELECT Id, Name, Breed__c, Weight__c, Years_Old__c from Dog__c ORDER BY CreatedDate DESC LIMIT 1]; | |
| List<Attachment> attachments = [SELECT Id, Body from Attachment WHERE ParentId =: exampleDog.Id]; | |
| if(attachments.size() > 0) { | |
| dogImage = attachments[0]; | |
| } else { | |
| dogImage = new Attachment(); | |
| } | |
| } | |
| @RemoteAction | |
| static public String saveImage(String imageData, String dogId, string dogName) { | |
| Attachment dogImage = new Attachment(); | |
| List<Attachment> attachments = [SELECT Id from Attachment WHERE ParentId =: dogId]; | |
| if(attachments.size() > 0) { | |
| dogImage = attachments[0]; | |
| } else { | |
| dogImage.parentid = dogId; | |
| } | |
| dogImage.Name = dogName + 'Profile'; | |
| dogImage.body = EncodingUtil.base64Decode(imageData); | |
| upsert dogImage; | |
| return null; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page showHeader="false" Controller="KennelTest" > | |
| <html> | |
| <head> | |
| <title>Capture Photo</title> | |
| <script type="text/javascript" charset="utf-8" src="{!URLFOR($Resource.PhoneGap12)}"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| var pictureSource; // picture source | |
| var destinationType; // sets the format of returned value | |
| // Wait for PhoneGap to connect with the device | |
| document.addEventListener("deviceready",onDeviceReady,false); | |
| //Device is ready | |
| function onDeviceReady() { | |
| pictureSource=navigator.camera.PictureSourceType; | |
| destinationType=navigator.camera.DestinationType; | |
| document.getElementById('dogDiv').style.opacity = 1; | |
| if('{!ImageBase64}' != '') { | |
| document.getElementById('dogImage').src = 'data:image/jpeg;base64,{!ImageBase64}'; | |
| } | |
| } | |
| function onPhotoDataSuccess(imageData) { | |
| document.getElementById('dogDiv').style.opacity = 0.1; | |
| KennelTest.saveImage(imageData, "{!exampleDog.Id}", "{!exampleDog.Name}", | |
| function(res,event){ | |
| document.getElementById('dogDiv').style.opacity = 1; | |
| }); | |
| document.getElementById('dogImage').src = "data:image/jpeg;base64," + imageData; | |
| } | |
| //via camera | |
| function capturePhoto() { | |
| // Take picture using device camera and retrieve image as base64-encoded string | |
| navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); | |
| } | |
| //editable photo alternative | |
| function capturePhotoEdit() { | |
| // Take picture using device camera, allow edit, and retrieve image as base64-encoded string | |
| navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); | |
| } | |
| //via library | |
| function getPhoto(source) { | |
| // Retrieve image file location from specified source | |
| navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, | |
| sourceType: source }); | |
| } | |
| function onFail(message) { | |
| window.console('Failed because: ' + message); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div style="position: absolute; height: 100%; width: 100px; background-color: white; top: 0px; text-align:center; border-right: 2px solid #999; padding-top: 20px; "> | |
| <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);"><apex:image url="{!URLFOR($Resource.glyphish, '42-photos.png')}" height="32" width="48" /></button><BR /><BR /> | |
| <button onclick="capturePhoto();"><apex:image url="{!URLFOR($Resource.glyphish, '86-camera.png')}" height="32" width="48" /></button><BR /><BR /> | |
| <button onclick="window.location.reload();" style="position: absolute; bottom: 40px; left: 15px;"><apex:image url="{!URLFOR($Resource.glyphish, '01-refresh.png')}" height="32" width="48" /></button><BR /><BR /> | |
| </div> | |
| <div id="dogDiv" style="position: absolute; top: 25px; left: 125px; opacity:0.5"> | |
| <image id="dogImage" src="{!URLFOR($Resource.glyphish, '82-dog-paw.png')}" style="float: left; width: 200px; height: 200px; border: 1px solid #999; margin-right: 10px;" /> | |
| <h2>{!exampleDog.Name}</h2>, | |
| <I>{!exampleDog.Breed__c}</I> | |
| <hr /> | |
| Weight: {!exampleDog.Weight__c} lbs. <BR /> | |
| Age: {!exampleDog.Years_Old__c} years | |
| </div> | |
| </body> | |
| </html> | |
| </apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment