picture from camera acting as link to camera instead of custom click event
I'm writing an android web app with phonegap+jquery mobile and I'm experiencing a strange problem - I fetch a picture using the getPicture method either with base64 or image_uri and then rewrite the image (through Image()) into a canvas element with drawimage.
everything work - (both way of fetching a picture) but the image created on the canvas element becomes somesort of link back to the camera. so when I click the picture instead of initiating the click event binded to the canvas I'm being sent back to the camera -so the "flowercolor" function that's supposed to fire with click doesn't turn on at all
why is that? what am I missing?
would the "captureimage" method work differently?
the html relevant code:
<script type = "text/javascript" src = "./js/modernizr.custom.31415.js"></script>
<link rel = "stylesheet" type ="text/css" href ="./css/jquery.mobile-1.0rc1.min.css"/>
</head>
<body dir ="rtl">
<div id = "camera">
<button data-role = "button" type = "button" id = "photo" >option1</button><br/>
<button data-role = "button" type = "button" id = "photobase" >option2</button><br/>
<span id = "showpic" style = "display:none;">showpic</span><br/>
<span id = "debug"></span>
</div>
<div id = "colorpicker">
<div id = "flowerpic">
</div></br/>
<span class = "aftercamera" id= "picked_color_selected" style= "display: none;">
</span><br/>
<span id = "sim"></span>
</div>
</div><!--end content -->
<!--scripts downloaded at the the end of the page -->
<script type = "text/javascript" src = "./js/jquery-1.6.4.min.js"></script>
<script type = "text/javascript" src = "./js/jquery.mobile-1.0rc1.min.js"></script>
<script type = "text/javascript" src = "./js/phonegap-1.1.0.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.addEventListener('deviceready',function(){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "./js/flora.js";
document.getElementsByTagName('body')[0].appendChild(scr开发者_StackOverflow社区ipt);
},true);
});
</script>
</body>
</html>
and this is the relevant js (including the functions for dealing with different image data formats - the image_uri and the base64 data):
function initcanvas (imageURI) {
$('.aftercamera').css('display','block');
img = new Image();
img.crossOrigin = ''; // no credentials flag. Same as img.crossOrigin='anonymous'
img.src = imageURI;
//load image to canvas
img.onload = function(){
var c = document.getElementById('fromimage');
var ctx = c.getContext('2d');
var width = window.innerWidth;
var ratio = img.width/(width*0.9);
if (ratio>1){
img.width = img.width / ratio;
img.height = img.height/ratio;
}
c.width = img.width;
c.height = img.height;
ctx.drawImage (img,0,0);
};
}
function camerasuccess (imageURI){
//$('#debug').html(imageURI[0]);
if (!imageURI[0]) {
$('#debug').html("לא התקבלה התמונה - נסה שנית");
} else {
$('#showpic').css('display','block').html("we have an image");
console.log(imageURI[0]);
initcanvas(imageURI[0]);
}
}
function camerabasesuccess (imagebase){
//$('#debug').html(imageURI[0]);
if (!imagebase) {
$('#debug').html("לא התקבלה התמונה - נסה שנית");
} else {
$('#showpic').css('display','block').html("we have an image");
console.log(imagebase);
var d = "data:image/jpeg;base64,"+imagebase;
initcanvas(d);
}
}
/*function camerasuccess(imageBASE) {
$('#showpic').css('display','block').html("we have an image");
//var imgsrc = "data:image/jpeg;base64,"+imageBASE[0];
//$('#imageplace').html('<img src ="'+imgsrc+'"/>');
var useimg = document.getElementById('useimage');
//
useimg.style.display = 'block';
useimg.src = "data:image/jpeg;base64,"+imageBASE;
}*/
function camerafail(error) {
$('#showpic').css('display','block').html("משהו לא עבד - נסה שוב"+error);
}
function camera(){
$('#showpic').css('display','block').html("טוען תמונת פרח");
var opt = {quality:50,destinationType:destinationType.FILE_URI,pictureSource:pictureSource.CAMERA};
navigator.camera.getPicture(camerasuccess,camerafail,opt);
}
function camerabase(){
$('#showpic').css('display','block').html("טוען ");
var opt = {quality:20,pictureSource:pictureSource.CAMERA};
navigator.camera.getPicture(camerabasesuccess,camerafail,opt);
}
function flowercolor(event){
code code
}
$(document).ready(function(){
//area = getpos(); //initiating geolocation
getpos();
var can;
if (Modernizr.canvas){
can = document.createElement('canvas');
can.id = "fromimage";
} else {
can = document.createElement('p');
can.style.display = "block";
can.textContent ="can't activate the camera, please choose flower color by hand";
/*var noncan = new Image();
noncan.src = '.pic/pallete.jpg';
noncan.style.display = 'block';
$('#flowerpic').append(noncan);*/
}
$('#flowerpic').append(can);
destinationType = navigator.camera.DestinationType;
pictureSource = navigator.camera.PictureSourceType;
//encoding = navigator.camera.Encodingtype; not supported in android
$('#photo').click(function(){camera();});
$('#photobase').click(function(){camerabase();});
$('#fromimage').click(function(){flowercolor(event); });
});
edit: can this problem be related to the fact that the element i'm binding the click event to is created with javascript and appended with jquery? I have some vogue memory there is an issue with elements created after $(document).ready but i'm not really sure- thanks again for the help!
加载中,请稍侯......
精彩评论