当前位置： 文江博客话题详情

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

发布于 2024-12-10 02:27:43 字数 5891 浏览 0 评论 0原文

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

一切正常 - （两种获取图片的方式），但是在画布元素上创建的图像成为某种返回相机的链接。因此，当我单击图片而不是启动绑定到画布的单击事件时，我将被发送回相机 - 因此应该通过单击触发的“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); });

});

编辑： 这个问题是否与我将单击事件绑定到的元素是使用 javascript 创建并附加 jquery 的事实有关？我有一些流行的记忆，在 $(document).ready 之后创建的元素存在问题，但我不太确定 - 再次感谢您的帮助！

原文

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(script);
                        },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!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

抱着落日

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文