当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Cordova Application Photo Editor

问题描述:

I am building a Cordova IOS application and has been trying to implement a photo editor, like Aviary for example. But I can't get any of it to work. So what I am asking for is if I could get help with a example of a working xcode projekt built via Cordova with a implemented photo editor.

This is my current JS to get the picture from the user:

var pictureSource; // picture source

var destinationType; // sets the format of returned value

// Wait for PhoneGap to connect with the device

//

function displayFormat(){

setTimeout(function(){

$("#photoSelector").delay( 800 ).css("display", "none");

$("#photoFormat").delay( 800 ).css("display", "block");

}, 2000);

}

function displayPhotochooser(){

window.location.href = "index.html";

}

document.addEventListener('deviceready', onDeviceReady, false);

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 onPhotoFileSuccess(imageData) {

// Get image handle

console.log(JSON.stringify(imageData));

// 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 = imageData;

displayFormat();

}

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

displayFormat();

}

// A button will call this function

//

function capturePhotoWithData() {

// Take picture using device camera and retrieve image as base64-encoded string

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });

}

function capturePhotoWithFile() {

navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });

}

// 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) {

displayPhotochooser();

}

cordova.plugins.Aviary.prepareForShow({

success: function (result) {

alert("Aviary is prepared to show.");

}

});

<html>

<head>

<title>Capture Photo</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<meta charset="utf-8">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

<script type="text/javascript" charset="utf-8" src="js/fastclick.js"></script>

<script type="text/javascript" charset="utf-8" src="js/getPicture.js"></script>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<link rel="stylesheet" href="css/style.css" type="text/css">

<button id="camera_btn" style="margin-top: 20px;background: #1995DF;color:white;text-shadow:none;border:1px solid #6083ce" class="ui-btn ui-icon-camera ui-btn-icon-right">Kameran</button> <br>

<button id="library_btn" style="margin-top: -10px;background: #1995DF;color:white;text-shadow:none;border:1px solid #6083ce" class="ui-btn ui-icon-grid ui-btn-icon-right">Bibliotek</button><br>

</div>

</div>

</div>

<div id="photoFormat" style="display: none;">

<div data-role="header" style="padding-top:20px;border-bottom:1px solid lightgray">

<a id="newPic" data-icon="back" style="margin-top: 20px;background: #1995DF;color:white;text-shadow:none;border:1px solid #6083ce">Ny Bild</a>

<h1>Välj ett format</h1>

</div>

<img style="display:none; max-width:100%;" id="largeImage" src="" />

</div>

<script>

$( document ).ready(function() {

$('#camera_btn').on('tap', function(){

capturePhotoWithFile();

displayFormat();

});

$("#camera_btn").on("touchstart", function(ev) {

$("#camera_btn").css("opacity", "0.8");

});

$("#camera_btn").on("touchend", function(ev) {

$("#camera_btn").css("opacity", "1");

});

$('#newPic').on('tap', function(){

$("#newPic").css("opacity", "0.2");

displayPhotochooser();

});

$('#library_btn').on('tap', function(){

$("#library_btn").css("opacity", "0.2");

getPhoto(pictureSource.PHOTOLIBRARY);

displayFormat();

});

$("#library_btn").on("touchstart", function(ev) {

$("#library_btn").css("opacity", "0.8");

});

$("#library_btn").on("touchend", function(ev) {

$("#library_btn").css("opacity", "1");

});

});

</script>

</body>

</html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: