Fatal编程技术网
  • android/
  • Android 来自摄影机的图片充当指向摄影机的链接，而不是自定义单击事件

Android 来自摄影机的图片充当指向摄影机的链接，而不是自定义单击事件

android cordova

Android 来自摄影机的图片充当指向摄影机的链接，而不是自定义单击事件,android,cordova,Android,Cordova,我正在用phonegap+jquery mobile编写一个android web应用程序 我遇到了一个奇怪的问题-我使用getPicture方法获取图片 使用base64或image_uri，然后使用drawimage将图像（通过image（））重写为画布元素 一切都可以工作（两种方式都可以获取图片），但是在canvas元素上创建的图像变成了某种回到相机的链接。因此，当我点击图片而不是启动绑定到画布上的点击事件时，我会被发送回相机——因此，应该通过点击触发的“flowercolor”功能根本不

我正在用phonegap+jquery mobile编写一个android web应用程序 我遇到了一个奇怪的问题-我使用getPicture方法获取图片 使用base64或image_uri，然后使用drawimage将图像（通过image（））重写为画布元素

一切都可以工作（两种方式都可以获取图片），但是在canvas元素上创建的图像变成了某种回到相机的链接。因此，当我点击图片而不是启动绑定到画布上的点击事件时，我会被发送回相机——因此，应该通过点击触发的“flowercolor”功能根本不会打开

为什么呢？我错过了什么

“captureimage”方法的工作方式会有所不同吗

html相关代码：

        <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(script);
                        },true);
                    });
        </script>
    </body>
</html>


选项1

选项2

showpic





$（文档）.ready（函数（）{
document.addEventListener（'deviceready'，function（）{
var script=document.createElement（'script'）；
script.type=“text/javascript”；
script.src=“./js/flora.js”；
document.getElementsByTagName（'body'）[0].appendChild（脚本）；
}，对）；
});
这是相关的js（包括处理不同图像数据格式的函数——图像uri和base64数据）：

函数initcanvas（imageURI）{
$（'.aftercamera'）.css（'display'，'block'）；
img=新图像（）；
img.crossOrigin=''；//无凭证标志。与img.crossOrigin='anonymous'相同
img.src=imageURI；
//将图像加载到画布
img.onload=函数（）{
var c=document.getElementById（'fromimage'）；
var ctx=c.getContext（'2d'）；
变量宽度=window.innerWidth；
var比率=最小宽度/（宽度*0.9）；
如果（比率>1）{
img.宽度=img.宽度/比率；
img.高度=img.高度/比率；
}
c、 宽度=img.width；
c、 高度=img.高度；
ctx.drawImage（img，0,0）；
};
}
函数camerasuccess（imageURI）{
//$（'#debug'）.html（imageURI[0]）；
如果（！imageURI[0]）{
$（‘调试’）.html（“调试”）；
}否则{
$（'#showpic'）.css（'display'，'block'）.html（“我们有一个图像”）；
log（imageURI[0]）；
initcanvas（imageURI[0]）；
}
}
函数camerabasesuccess（imagebase）{
//$（'#debug'）.html（imageURI[0]）；
如果（！imagebase）{
$（‘调试’）.html（“调试”）；
}否则{
$（'#showpic'）.css（'display'，'block'）.html（“我们有一个图像”）；
console.log（imagebase）；
var d=“data:image/jpeg；base64，”+imagebase；
第一阶段（d）；
}
}
/*功能camerasuccess（imageBASE）{
$（'#showpic'）.css（'display'，'block'）.html（“我们有一个图像”）；
//var imgsrc=“数据：图像/jpeg；base64，”+imageBASE[0]；
//$（'#imageplace'）.html（''）；
var useimg=document.getElementById（'useimage'）；
//
useimg.style.display='block'；
useimg.src=“数据：图像/jpeg；base64，”+imageBASE；
}*/
函数camerafail（错误）{
$（‘showpic’）.css（‘display’、‘block’）.html（“display’、‘block’））.html（“error”）；
}
功能摄像机（）{
$（‘showpic’）.css（‘display’、‘block’）.html（“display’、‘block’））；
var opt={quality:50，destinationType:destinationType.FILE_URI，pictureSource:pictureSource.CAMERA}；
navigator.camera.getPicture（camerasucces、camerafail、opt）；
}
函数camerabase（）{
$（'showpic'）.css（'display'，'block'）.html（'；
var opt={quality:20，pictureSource:pictureSource.CAMERA}；
navigator.camera.getPicture（camerabasesuccess、camerafail、opt）；
}
功能颜色（事件）{
代码
}
$（文档）.ready（函数（）{
//area=getpos（）；//启动地理定位
getpos（）；
var-can；
if（现代化画布）{
can=document.createElement（'canvas'）；
can.id=“fromimage”；
}否则{
can=document.createElement（'p'）；
can.style.display=“块”；
can.textContent=“无法启动摄像头，请手动选择花色”；
/*var noncan=新图像（）；
noncan.src='.pic/pallete.jpg'；
noncan.style.display='block'；
$（'#flowerpic'）。附加（非扫描）；*/
}
$（'#flowerpic'）。附加（can）；
destinationType=navigator.camera.destinationType；
pictureSource=navigator.camera.PictureSourceType；
//encoding=navigator.camera.Encodingtype；android不支持
$（'#photo'）。单击（function（）{camera（）；}）；
$（'#photobase'）。单击（函数（）{camerabase（）；}）；
$（'#fromimage'）。单击（函数（）{flowercolor（事件）；}）；
});
编辑：
这个问题是否与我绑定click事件的元素是用javascript创建并附加jquery的事实有关？我有一些vogue记忆，在$（文档）之后创建的元素有问题。准备好了吗，但我不确定-再次感谢您的帮助

我想我解决了这个问题——绑定单击而不是点击，并且没有从函数内部传递事件——我将检查它并更新答案 
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); });

});