設置DIV背景合影留念用相機

我建立使用PhoneGap的Android中移動應用程序，我試圖一個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)")

任何幫助將是巨大的。

來源

2011-12-05 jcrowson

究竟是不是爲你工作這個工作給我嗎？是什麼讓你做$（「＃包裝」）。CSS（「背景圖片」，largeimage）？或者是對用戶沒有得到相機取消，接受屏幕的問題>？ – alonisser

那麼，什麼是你的問題有？請告訴我問題呢？ – Christopher

我在底部提示這行代碼是行不通的，它只是給我想要的東西的想法。 – jcrowson

你想要的是URI，而不是以base64數據

在功能onPhotoURISuccess的底部添加

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

，並在呼叫capturePhoto使用它作爲你的成功處理程序（）。我只是用了幾乎完全一樣的代碼（從PhoneGap的的攝像頭API文檔樣本）

來源

2012-04-19 21:10:51 chad

設置DIV背景合影留念用相機

回答

相關問題