Skip to content

Instantly share code, notes, and snippets.

@pamelafox
Created April 19, 2012 02:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pamelafox/2417988 to your computer and use it in GitHub Desktop.
Save pamelafox/2417988 to your computer and use it in GitHub Desktop.
Getting/rotating photos in PhoneGap
function getPhoto(mealId, sourceType, saveOnSuccess) {
var $mealDiv = $('#log-meal-' + mealId);
var $mealImg = $mealDiv.find('.log-meal-photo-button img');
var $quickpicStatus = $('#mobile-quickpic-link span');
function resetQuickPicStatus() {
$quickpicStatus.html('').addClass('icon-camera');
}
function getDataUri(imageUri, onSuccess, onFail) {
var $img = $('<img/>');
$img.attr('src', imageUri);
$img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
$img.bind('load', function() {
var canvas = document.createElement("canvas");
var canvasContext = canvas.getContext('2d');
var imageWidth = $img.width();
var imageHeight = $img.height();
var degree = 0;
var canvasWidth = imageWidth;
var canvasHeight = imageHeight;
var canvasX = 0;
var canvasY = 0;
var orientation = ED.util.getUrlParam('orientation', imageUri);
ED.util.log(orientation);
if (orientation == 6) degree = 90;
if (orientation == 3) degree = 180;
if (orientation == 8) degree = 270;
// Calculate new canvas size and x/y coorditates for image
switch(degree){
case 90:
canvasWidth = imageHeight;
canvasHeight = imageWidth;
canvasY = imageHeight * (-1);
break;
case 180:
canvasX = imageWidth * (-1);
canvasY = imageHeight * (-1);
break;
case 270:
canvasWidth = imageHeight;
canvasHeight = imageWidth;
canvasX = imageWidth * (-1);
break;
}
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
if (degree > 0) {
ED.util.log('Rotating picture ' + degree + ' degrees');
canvasContext.rotate(degree * Math.PI / 180);
}
canvasContext.drawImage($img[0], canvasX, canvasY);
var dataUrl = canvas.toDataURL('image/png');
if (dataUrl.indexOf('data:image/png') == -1) {
onFail('Got back an invalid data URL');
} else {
onSuccess(dataUrl.replace('data:image/png;base64,', ''));
}
});
$img.bind('error', function() {
onFail('Couldnt convert photo to data URI');
});
$('body').append($img);
}
function onPhotoDataSuccess(imageUri) {
FETCHING_PHOTO = false;
resetQuickPicStatus();
try {
ED.util.log('Image data URI: ' + imageUri.substr(0, 50));
$('input[name="meal-' + mealId + '_photo_data"]').val(imageUri).trigger('change');
if (saveOnSuccess) {
ED.util.triggerClick($('#mobile-log-meals-form .save-button'));
}
$mealImg.attr('src', 'data:image/png;base64,' + imageUri);
} catch(e) {
logError(e);
}
}
function onPhotoSuccess(imageUri) {
ED.util.log('Got image URI from PG callback: ' + imageUri);
if (imageUri.indexOf('://') > -1) {
ED.util.log('Converting to data URI');
if (imageUri.indexOf('?') > -1) {
imageUri += '&';
} else {
imageUri += '?';
}
imageUri += 'rand=' + (new Date()).getTime();
ED.util.log('Generated cache-busting URI: ' + imageUri);
getDataUri(imageUri, onPhotoDataSuccess, onPhotoFail);
} else {
onPhotoDataSuccess(imageUri);
}
}
function onPhotoFail(message) {
FETCHING_PHOTO = false;
resetQuickPicStatus();
ED.util.log('Photo failed: ' + message);
$mealImg.attr('src', 'img/camerabutton.png');
}
$quickpicStatus.html('<img src="img/loading_trans_16x16.gif">').removeClass('icon-camera');
$mealImg.attr('src', 'img/loading_big.gif').show();
ED.util.hideModals();
FETCHING_PHOTO = true;
var targetWidth = 600;
var targetHeight = 600;
var imageQuality = (ED.util.isAndroid() ? 50 : 70);
var destinationType = navigator.camera.DestinationType.FILE_URI;
// Check if this is a stupid Android that doesnt support canvas.toDataURL properly
if (!ED.util.supportsDataURL()) {
ED.util.log('Using DATA_URL instead due to lack of support for canvas.toDataURL');
destinationType = navigator.camera.DestinationType.DATA_URL;
targetWidth = 400;
targetHeight = 400;
}
navigator.camera.getPicture(onPhotoSuccess, onPhotoFail,
{quality: imageQuality,
sourceType: sourceType, destinationType: destinationType,
targetWidth: targetWidth, targetHeight: targetHeight});
}
@valeroAlbatera
Copy link

Hi...I need something like this, but how can use?? Im new in phonegap, and I need to save the picture in a correct orientation...or rotate the image after take a picture.
My email is valero_albatera@hotmail.com

Thanks. Regards...

@acestudiooleg
Copy link

hi, Pam. Can you tell me, what doing this function ED.util.getUrlParam('orientation', imageUri); and where can I take it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment