Question

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

一切正常 - （两种方式获取图片）但是在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>

这是相关的js（包括处理不同图像数据格式的函数 - image_uri和base64数据）：

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

});

编辑：这个问题是否与我绑定click事件的元素是用javascript创建并附加jquery这一事实有关？我有一些时尚记忆，在$（文件）之后创建的元素存在问题。但是我不确定 - 再次感谢你的帮助！

来自相机的图片充当相机的链接而不是自定义点击事件

0 个答案: