2011-12-05 12 views
1

AndroidでPhoneGapを使用してモバイルアプリを構築していて、カメラを使って撮影した写真にdivの背景を設定しようとしています。div背景をカメラで撮影した写真に設定します

写真を撮った後、私はすぐに写真を表示するのではなく、ボディーdivの背景画像を写真として設定したいと思います。前のコードで背景を設定するには

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); 

// PhoneGap is ready to be used! 
// 
function onDeviceReady() { 
    pictureSource=navigator.camera.PictureSourceType; 
    destinationType=navigator.camera.DestinationType; 
} 

// Called when a photo is successfully retrieved 
// 
function onPhotoDataSuccess(imageData) { 
    // Uncomment to view the base64 encoded image data 
    // console.log(imageData); 

    // Get image handle 
    // 
    var smallImage = document.getElementById('smallImage'); 

    // Unhide image elements 
    // 
    smallImage.style.display = 'block'; 

    // Show the captured photo 
    // The inline CSS rules are used to resize the image 
    // 
    smallImage.src = "data:image/jpeg;base64," + imageData; 

    //set the background here? 
    $('#wrapper').css("background-image", "url(imageData.jpg)"); 
} 

// Called when a photo is successfully retrieved 
// 
function onPhotoURISuccess(imageURI) { 
    // Uncomment to view the image file URI 
    // console.log(imageURI); 

    // Get image handle 
    // 
    var largeImage = document.getElementById('largeImage'); 

    // Unhide image elements 
    // 
    largeImage.style.display = 'block'; 

    // Show the captured photo 
    // The inline CSS rules are used to resize the image 
    // 
    largeImage.src = imageURI; 
} 

// A button will call this function 
// 
function capturePhoto() { 
    // Take picture using device camera and retrieve image as base64-encoded string 
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); 
} 

// A button will call this function 
// 
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 }); 
} 

// A button will call this function 
// 
function getPhoto(source) { 
    // Retrieve image file location from specified source 
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI, 
    sourceType: source }); 
} 

// Called if something bad happens. 
// 
function onFail(message) { 
    alert('Failed because: ' + message); 
} 

、私は次のように使用しました:

$('#wrapper').css("background-image", "url(imageData.jpg)") 

すべてのヘルプは素晴らしいことです。あなたが欲しいもの

+0

正確に何があなたのために働いていないのですか?あなたは$( '#wrapper')をやっていないのですか?css( "background-image"、largeimage)?またはカメラを手に入れなかったというユーザの質問は、画面を受け付けます。? – alonisser

+0

あなたは何ですか?何が間違っているのですか? – Christopher

+0

私が提案したコードの行は機能していません。私が欲しいものを考えているだけです。 – jcrowson

答えて

1

)はURIではなくBASE64データ

は関数onPhotoURISuccessの下部に

$('#wrapper').css("background-image", "url("+imageURI+")") 

を追加し、capturePhoto(への呼び出しであなたの成功ハンドラとして使用されます。私はちょうど正確に同じコード(phonegapのカメラAPIドキュメントからのサンプル)を使用して私のために働いています

関連する問題